Property declarations style matching elements—same idea as CSS. Sass adds SassScript values, nested property names, interpolated names, and special rules for CSS custom properties.
width: $size; and border-radius: $size * 0.5; are evaluated before CSS is emitted.
transition: { property: font-size; } becomes transition-property: font-size.
#{ }.--x: $primary; keeps the text $primary. Use --x: #{$primary}; to inject the value.
.circle {
$size: 100px;
width: $size; // SassScript value
border-radius: $size * 0.5;
}
.enlarge {
transition: { // nested names → transition-*
property: font-size;
duration: 4s;
}
}
.gray {
-#{$prefix}-filter: ...; // interpolated property name
}
:root {
--primary: #{$primary}; // custom props: interpolate to inject
border-radius: null; // omitted from CSS
}Pattern: write name: value; → evaluate SassScript → nest or interpolate names when useful → omit null values.
What you will use most often:
| Pattern | Result idea |
|---|---|
width: $size * 2; | SassScript expression as the value |
font: { size: 14px; } | Nested → font-size |
margin: auto { top: 2px; } | Shorthand + nested longhands |
#{$prop}: $value; | Dynamic property name |
radius: null; | Declaration omitted from CSS |
--x: #{$v}; | Inject Sass into a CSS custom property |
Open View Compiled CSS for verified Dart Sass output (matches official Sass docs samples where shown).
A local variable drives width, height, and a calculated radius.
.circle {
$size: 100px;
width: $size;
height: $size;
border-radius: $size * 0.5;
}50px.Shared prefixes nest under one name, joined with a hyphen.
.enlarge {
font-size: 14px;
transition: {
property: font-size;
duration: 4s;
delay: 2s;
}
&:hover { font-size: 36px; }
}transition-*.Set a shorthand value and override sides underneath.
.info-page {
margin: auto {
bottom: 10px;
top: 2px;
}
}margin- and border-.Custom property values are almost raw CSS—interpolate to inject Sass.
$primary: #81899b;
$accent: #302e24;
$warn: #dfa612;
:root {
--primary: #{$primary};
--accent: #{$accent};
--warn: #{$warn};
// Looks like Sass, but passed through as CSS text:
--consumed-by-js: $primary;
}$primary stays literal text.meta.inspect().Most declaration bugs are custom properties without interpolation, or confusing property nesting with selector nesting.
Always wrap injected values in #{ }. See interpolation.
font: { size: ... } builds a property name. &:hover nests a style rule.
Useful for optional styles; do not confuse with the CSS keyword initial.
For custom properties, use meta.inspect() when quotes must survive.
Property declarations are core Sass on Dart Sass.
| Feature | Status |
|---|---|
| SassScript values | Supported |
| Nested property names | Supported |
| Interpolated property names | Supported |
Hidden null declarations | Supported |
Custom properties (raw + #{ }) | Supported on modern Dart Sass |
Compile with the Dart Sass CLI.
transition- and font-.#{ } to inject Sass values.One line: declarations are CSS properties with Sass superpowers—expressions, nested names, and careful custom-property injection.
Practical checklist:
1. Use variables / math in declaration values
2. Nest shared prefixes (font-, margin-, transition-)
3. Interpolate dynamic property names with #{}
4. Pass null to omit optional declarations
5. For --custom properties, inject Sass only via #{}Use & to attach states and suffixes to the outer selector.
8 people found this page helpful