meta.variable-exists($name) returns a boolean: whether a variable named $name exists in the current scope. Pass the name without the $. Load with @use "sass:meta".
meta.variable-exists("var1") is false until you declare $var1; a local $var2 inside a rule returns true in that scope.
Unlike meta.global-variable-exists, this helper sees variables declared in the current scope—including locals inside rules and mixins.
$module argument.It only takes $name. For namespaced module variables, use global-variable-exists with $module, or module-variables.
@use "sass:meta";
meta.variable-exists($name); //=> boolean
meta.variable-exists("var1"); // false until defined
$var1: value;
meta.variable-exists("var1"); // true
h1 {
$var2: value; // local
meta.variable-exists("var2"); // true here
}
// Global alias (legacy): variable-exists($name)
// Prefer meta.variable-exists after @use "sass:meta"Pattern: pass a bare name → get true/false for the current scope → branch with @if.
Same name, different helpers:
| Where declared | variable-exists | global-variable-exists |
|---|---|---|
| File root / global scope | true | true |
| Inside a rule / mixin / function | true (in that scope) | false |
| Never declared | false | false |
$module support | No | Yes |
Docs show a local $var2 inside h1: variable-exists is true; global-variable-exists is false.
Examples use @use "sass:meta". Open View Compiled CSS for verified Dart Sass output (matches official Sass docs samples where shown).
A name is missing until you define it (official var1 idea).
@use "sass:meta";
.before {
--var1: #{meta.variable-exists("var1")};
}
$var1: value;
.after {
--var1: #{meta.variable-exists("var1")};
}"var1" looks for $var1.false.true.A variable inside a rule is visible to variable-exists there.
@use "sass:meta";
$brand: #0d9488;
.card {
$accent: #f59e0b;
--brand: #{meta.variable-exists("brand")};
--accent: #{meta.variable-exists("accent")};
--missing: #{meta.variable-exists("nope")};
}.card.false.global-variable-existsSame names, different answers for a local variable.
@use "sass:meta";
$brand: #0d9488;
.card {
$accent: #f59e0b;
--accent-any: #{meta.variable-exists("accent")};
--accent-global: #{meta.global-variable-exists("accent")};
--brand-any: #{meta.variable-exists("brand")};
--brand-global: #{meta.global-variable-exists("brand")};
}variable-exists only.false for it.@ifUse a variable when it exists; otherwise fall back.
@use "sass:meta";
$brand: teal;
.box {
@if meta.variable-exists("brand") {
color: $brand;
} @else {
color: gray;
}
@if meta.variable-exists("accent") {
border-color: $accent;
} @else {
border-color: silver;
}
}A mixin-local variable is visible to nested rules in that mixin.
@use "sass:meta";
@mixin chip {
$label: "chip";
.chip {
--has-label: #{meta.variable-exists("label")};
--has-ghost: #{meta.variable-exists("ghost")};
content: $label;
}
}
@include chip;Most variable-exists bugs are including $ or expecting module-wide checks.
Pass "brand", not "$brand".
There is no $module argument—use global-variable-exists for namespaces.
global-variable-exists ignores rule/mixin locals; this one finds them.
Browsers never see the check—only the finished CSS values.
Prefer the module form with current Dart Sass.
| API | Status |
|---|---|
meta.variable-exists() | Dart Sass via @use "sass:meta" |
| Return type | Boolean |
| Name argument | String without $ |
| Legacy global | variable-exists($name) |
Compile with the Dart Sass CLI.
$.One line: to ask whether a variable exists where you are, use meta.variable-exists($name).
Practical checklist:
1. @use "sass:meta"
2. Pass bare name without $
3. Check in the scope where you need the answer
4. Branch with @if for optional values
5. Use global-variable-exists for globals-only / $moduleStart the selector module—append one selector to another.
8 people found this page helpful