---
title: Property Declarations
table_of_contents: true
introduction: >
  In Sass as in CSS, property declarations define how elements that match a
  selector are styled. But Sass adds extra features to make them easier to write
  and to automate. First and foremost, a declaration's value can be any
  [SassScript expression](/documentation/syntax/structure#expressions), which
  will be evaluated and included in the result.
---

{% codeExample 'declaration' %}
  .circle {
    $size: 100px;
    width: $size;
    height: $size;
    border-radius: $size * 0.5;
  }
  ===
  .circle
    $size: 100px
    width: $size
    height: $size
    border-radius: $size * 0.5
{% endcodeExample %}

{% markdown %}
  ## Interpolation

  A property's name can include [interpolation][], which makes it possible to
  dynamically generate properties as needed. You can even interpolate the entire
  property name!

  [interpolation]: /documentation/interpolation
{% endmarkdown %}

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

  .gray {
    @include prefix(filter, grayscale(50%), moz webkit);
  }
  ===
  @mixin prefix($property, $value, $prefixes)
    @each $prefix in $prefixes
      -#{$prefix}-#{$property}: $value

    #{$property}: $value


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

{% markdown %}
  ## Nesting

  Many CSS properties start with the same prefix that acts as a kind of
  namespace. For example, `font-family`, `font-size`, and `font-weight` all
  start with `font-`. Sass makes this easier and less redundant by allowing
  property declarations to be nested. The outer property names are added to the
  inner, separated by a hyphen.
{% endmarkdown %}

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

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

    &:hover
      font-size: 36px
{% endcodeExample %}

{% markdown %}
  Some of these CSS properties have shorthand versions that use the namespace as
  the property name. For these, you can write both the shorthand value *and* the
  more explicit nested versions.
{% endmarkdown %}

{% codeExample 'nesting-shorthand' %}
  .info-page {
    margin: auto {
      bottom: 10px;
      top: 2px;
    }
  }
  ===
  .info-page
    margin: auto
      bottom: 10px
      top: 2px
{% endcodeExample %}

{% markdown %}
  ## Hidden Declarations

  Sometimes you only want a property declaration to show up some of the time. If
  a declaration's value is [`null`][] or an empty [unquoted string][], Sass
  won't compile that declaration to CSS at all.

  [`null`]: /documentation/values/null
  [unquoted string]: /documentation/values/strings#unquoted
{% endmarkdown %}

{% codeExample 'hidden-declarations' %}
  $rounded-corners: false;

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

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

{% markdown %}
  ## Custom Properties

  {% # Arguments are (in order): `dart`, `libsass`, `node`, `ruby`, optional feature name, additional details within %}
  {% compatibility true, '3.5.0', null, '3.5.0', 'SassScript Syntax' %}
    Older versions of LibSass and Ruby Sass parsed custom property declarations
    just like any other property declaration, allowing the full range of
    SassScript expressions as values. Even when using these versions, it's
    recommended that you use interpolation to inject SassScript values for
    forwards-compatibility.

    See [the breaking change page][] for more details.

    [the breaking change page]: /documentation/breaking-changes/css-vars
  {% endcompatibility %}

  [CSS custom properties][], also known as CSS variables, have an unusual
  declaration syntax: they allow almost any text at all in their declaration
  values. What's more, those values are accessible to JavaScript, so any value
  might potentially be relevant to the user. This includes values that would
  normally be parsed as SassScript.

  [CSS Custom Properties]: https://developer.mozilla.org/en-US/docs/Web/CSS/--*

  Because of this, Sass parses custom property declarations differently than
  other property declarations. All tokens, including those that look like
  SassScript, are passed through to CSS as-is. The only exception is
  [interpolation][], which is the only way to inject dynamic values into a
  custom property.

  [interpolation]: /documentation/interpolation
{% endmarkdown %}

<!-- TODO(nweiz): auto-generate this CSS once we're compiling with Dart Sass -->
{% codeExample 'custom-properties' %}
  $primary: #81899b;
  $accent: #302e24;
  $warn: #dfa612;

  :root {
    --primary: #{$primary};
    --accent: #{$accent};
    --warn: #{$warn};

    // Even though this looks like a Sass variable, it's valid CSS so it's not
    // evaluated.
    --consumed-by-js: $primary;
  }
  ===
  $primary: #81899b
  $accent: #302e24
  $warn: #dfa612

  :root
    --primary: #{$primary}
    --accent: #{$accent}
    --warn: #{$warn}

    // Even though this looks like a Sass variable, it's valid CSS so it's not
    // evaluated.
    --consumed-by-js: $primary
  ===
  :root {
    --primary: #81899b;
    --accent: #302e24;
    --warn: #dfa612;
    --consumed-by-js: $primary;
  }
{% endcodeExample %}

{% headsUp false %}
  {% markdown %}
    Unfortunately, [interpolation][] removes quotes from strings, which makes it
    difficult to use quoted strings as values for custom properties when they
    come from Sass variables. As a workaround, you can use the [`meta.inspect()`
    function][] to preserve the quotes.

    [interpolation]: /documentation/interpolation
    [`meta.inspect()` function]: /documentation/modules/meta#inspect
  {% endmarkdown %}

  {% codeExample 'custom-properties-strings-meta' %}
    @use "sass:meta";

    $font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto;
    $font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas;

    :root {
      --font-family-sans-serif: #{meta.inspect($font-family-sans-serif)};
      --font-family-monospace: #{meta.inspect($font-family-monospace)};
    }
    ===
    @use "sass:meta"

    $font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto
    $font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas

    :root
      --font-family-sans-serif: #{meta.inspect($font-family-sans-serif)}
      --font-family-monospace: #{meta.inspect($font-family-monospace)}
    ===
    :root {
      --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto;
      --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas;
    }
  {% endcodeExample %}
{% endheadsUp %}