Sass: Nested Properties

Using nested properties, you can avoid rewriting CSS multiple times. Many CSS properties share a common prefix that acts as a kind of namespace. For example, font-family, font-size, font-weight, and font-variant all start with font-. In plain CSS, you must type the namespace prefix every time. Using Sass, you can nest the properties by writing the namespace only once.

How It Works

You write the namespace (the shared prefix) followed by a colon and a block ({ } in SCSS, or an indented block in the Sass syntax). Inside the block, you write only the suffix of each property:

.line {
  font: {
    family: Lucida Sans Unicode;
    size: 20px;
    weight: bold;
    variant: small-caps;
  }
}

Sass joins the outer namespace and each inner name with a hyphen, producing:

.line {
  font-family: Lucida Sans Unicode;
  font-size: 20px;
  font-weight: bold;
  font-variant: small-caps;
}

Full Example

Here is a complete, runnable example. First, the HTML file (nested.html):

<!DOCTYPE html>
<html>
   <head>
      <title>Nested Properties</title>
      <link rel="stylesheet" type="text/css" href="style.css" />
   </head>

   <body>
      <div class="container">
         <h1>Example using Nested Properties</h1>
         <p class="line">SASS stands for Syntactically Awesome Stylesheet</p>
      </div>
   </body>
</html>

Next, create the style.scss file:

.line {
  font: {
    family: Lucida Sans Unicode;
    size: 20px;
    weight: bold;
    variant: small-caps;
  }
}

Tell Sass to watch the file and update the CSS whenever it changes:

sass --watch style.scss:style.css

The generated style.css file is as shown below:

.line {
  font-family: Lucida Sans Unicode;
  font-size: 20px;
  font-weight: bold;
  font-variant: small-caps;
}

Other Common Namespaces

Any group of CSS properties that shares a prefix can be nested this way. Common namespaces include font, text, transition, margin, padding, border, and list.

text

.label {
  text: {
    align: center;
    transform: uppercase;
    decoration: underline;
  }
}

Compiles to:

.label {
  text-align: center;
  text-transform: uppercase;
  text-decoration: underline;
}

transition

This example comes from the official Sass documentation:

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

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

Compiles to:

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

padding and border

.card {
  padding: {
    top: 10px;
    bottom: 10px;
    left: 20px;
    right: 20px;
  }
  border: {
    width: 1px;
    style: solid;
    color: #ccc;
  }
}

Compiles to:

.card {
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 20px;
  padding-right: 20px;
  border-width: 1px;
  border-style: solid;
  border-color: #ccc;
}

Combining a Shorthand Value with Nested Properties

Some CSS properties have a shorthand that uses the namespace as the property name (for example, margin: auto, font: italic bold 16px/2 Arial). For these, Sass lets you write the shorthand value and the more explicit nested versions together.

After the shorthand value, simply open a nested block:

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

Compiles to:

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

The shorthand declaration (margin: auto) is emitted first, then each nested property is emitted in full (margin-bottom, margin-top).

SCSS vs. Sass Syntax

The nested-property feature works in both syntaxes. In the indented .sass syntax, the block is indicated by indentation (no braces, no semicolons):

.line
  font:
    family: Lucida Sans Unicode
    size: 20px
    weight: bold
    variant: small-caps

Compiles to the same CSS:

.line {
  font-family: Lucida Sans Unicode;
  font-size: 20px;
  font-weight: bold;
  font-variant: small-caps;
}

Summary

Nested properties are a small but readability-boosting feature. Whenever you find yourself typing the same prefix several times in a row, consider nesting them.