Sass Property Declarations

What You’ll Learn

Sass property declarations style matching elements like CSS—with SassScript values, nested prefixes, interpolated names, optional (hidden) declarations, and special rules for CSS custom properties. Five compiled examples follow.

What Are Property Declarations?

Official docs: in Sass as in CSS, declarations define how elements that match a selector are styled. Sass makes them easier to write and automate—first and foremost, a declaration’s value can be any SassScript expression, evaluated into the CSS result.

• Use variables, math, functions, and lists as values.
• Nest related longhands under a shared prefix.
• Build property names with #{ } when needed.
• Skip emitting a property when its value is null (or an empty unquoted string).

📝 Syntax

.circle {
  $size: 100px;
  width: $size;
  height: $size;
  border-radius: $size * 0.5;
}

🔢 Interpolating Property Names

A property’s name can include interpolation so you can generate vendor prefixes or entire property identifiers dynamically.

🏷️ Nested Properties

Many CSS properties share a prefix namespace (font-, transition-, margin-). Nest the inner parts; Sass joins them with a hyphen.

For shorthands that use the same name as the namespace, you can write the shorthand value and nest more specific longhands underneath.

👁️ Hidden Declarations

If a declaration’s value is null or an empty unquoted string, Sass does not compile that declaration to CSS. Pair this with if($condition, $value, null) to toggle properties cleanly.

🎨 Custom Properties (--)

CSS custom properties allow almost any text as a value (and JS can read them). Because of that, Sass parses them differently: tokens that look like SassScript are passed through as-is. The only way to inject dynamic Sass values is interpolation.

Note: the plain-CSS @function result property is parsed like a custom property (interpolation required) in Dart Sass 1.94.0+. Older compilers (including many 1.69.x installs) may not support that API yet.

Examples Gallery

Each example is verified with Dart Sass. Open View Compiled CSS for output.

.circle {
  $size: 100px;
  width: $size;
  height: $size;
  border-radius: $size * 0.5;
}

.circle {
  width: 100px;
  height: 100px;
  border-radius: 50px;
}

@mixin prefix($property, $value, $prefixes) {
  @each $prefix in $prefixes {
    -#{$prefix}-#{$property}: $value;
  }
  #{$property}: $value;
}

.gray {
  @include prefix(filter, grayscale(50%), moz webkit);
}

.gray {
  -moz-filter: grayscale(50%);
  -webkit-filter: grayscale(50%);
  filter: grayscale(50%);
}

.enlarge {
  font-size: 14px;
  transition: {
    property: font-size;
    duration: 4s;
    delay: 2s;
  }

  &:hover { font-size: 36px; }
}

.enlarge {
  font-size: 14px;
  transition-property: font-size;
  transition-duration: 4s;
  transition-delay: 2s;
}
.enlarge:hover {
  font-size: 36px;
}

.info-page {
  margin: auto {
    bottom: 10px;
    top: 2px;
  }
}

.info-page {
  margin: auto;
  margin-bottom: 10px;
  margin-top: 2px;
}

@use "sass:meta";

$primary: #81899b;
$rounded-corners: false;
$font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto;

:root {
  --primary: #{$primary};
  // Looks like Sass, but stays literal CSS text:
  --consumed-by-js: $primary;
  --font-family-sans-serif: #{meta.inspect($font-family-sans-serif)};
}

.button {
  border: 1px solid black;
  border-radius: if($rounded-corners, 5px, null);
}

:root {
  --primary: #81899b;
  --consumed-by-js: $primary;
  --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto;
}

.button {
  border: 1px solid black;
}

🚀 Real-World Use Cases

• Design tokens — compute sizes from one $space variable.
• Vendor prefixes — mixin loops with interpolated property names.
• Cleaner longhands — nest transition- / animation- groups.
• Feature flags — emit radius/shadow only when a boolean is true.
• Theme bridges — push Sass colors into :root { --* } for runtime CSS.

⚠️ Common Pitfalls

• --token: $sass-var; — does not substitute; use #{$sass-var}.
• Quotes lost in -- — use meta.inspect when quotes matter.
• Over-nesting — nesting properties is for prefixes, not for inventing invalid CSS names.
• Expecting empty string tricks — only null / empty unquoted strings hide declarations.
• color: #{$brand} — unnecessary for normal properties.

💡 Best Practices