Sass variables store a value under a name that starts with $. Declare with $name: value;, then reuse the name anywhere a value is allowed.
Unlike CSS custom properties, Sass variables do not appear in the CSS output. They are replaced with their values at compile time.
If you use a variable and later change it, earlier uses keep the old value. CSS variables are declarative and can update both earlier and later uses.
Assigns only if the variable is undefined or null. Configure with @use … with (...).
$base-color: #c6538c;
$border-dark: rgba($base-color, 0.88);
.alert {
border: 1px solid $border-dark;
}
$brand: #036 !default; // only if unset / null
$theme: dark !global; // assign global from a local block
@use "library" with (
$black: #222
);Pattern: declare $name → use it in values → use !default for configurable defaults → respect scope (global vs local).
What you will use most often:
| Pattern | Result idea |
|---|---|
$name: value; | Declare / overwrite a variable |
$name: value !default; | Set only if undefined or null |
$name: value !global; | Assign the existing global from a block |
Top-level vs inside { } | Global vs local scope |
@use "lib" with (...) | Override a library’s !default vars |
$font-size / $font_size | Same variable (hyphen = underscore) |
Open View Compiled CSS for verified Dart Sass output (matches official Sass docs samples where shown).
Store a color, derive another value, use both in CSS.
$base-color: #c6538c;
$border-dark: rgba($base-color, 0.88);
.alert {
border: 1px solid $border-dark;
}rgba.Changing a variable later does not rewrite earlier uses.
$variable: value 1;
.rule-1 {
value: $variable;
}
$variable: value 2;
.rule-2 {
value: $variable;
}value 1.Top-level variables are global; inside a block they are usually local.
$global-variable: global value;
.content {
$local-variable: local value;
global: $global-variable;
local: $local-variable;
}
.sidebar {
global: $global-variable;
// $local-variable is not in scope here
}$global-variable is visible everywhere after..content.!default Keeps the First ValueA later !default does not overwrite an already-set variable.
$brand: #036 !default;
$brand: #c6538c !default;
.button {
background: $brand;
}$brand to #036.null.@use … withOverride a library’s top-level !default variables when loading it.
$black: #000 !default;
$border-radius: 0.25rem !default;
$box-shadow: 0 0.5rem 1rem rgba($black, 0.15) !default;
code {
border-radius: $border-radius;
box-shadow: $box-shadow;
}@use "library" with (
$black: #222,
$border-radius: 0.1rem
);!default vars.$black.Most variable bugs are mixing up Sass vars with CSS custom properties, or fighting scope.
Need runtime theming in the browser? Use CSS custom properties (often injected via declarations with #{ }).
Variables inside { } stay local unless you use !global on an already-declared global.
In @if / loops, assign to an outer variable that already exists (even as null).
Variables are core Sass; module configuration needs Dart Sass @use.
| Feature | Status |
|---|---|
$name: value | Supported |
!default / !global | Supported |
@use … with (...) | Dart Sass 1.23+ |
| Hyphen = underscore names | Supported |
Compile with the Dart Sass CLI.
-- variables.@use with configure libraries.One line: use $variables to name values once, keep them unit-clean, and configure shared libraries with !default.
Practical checklist:
1. Declare $name: value; near the top (or in a module)
2. Reuse $name in property values and calculations
3. Use !default for library-configurable settings
4. Configure with @use "lib" with ( $var: value )
5. For dynamic names, use a map—not $name-#{$key}Write silent and loud comments that document your variables and mixins.
8 people found this page helpful