Jon Stuebe

Sass Nested Properties

Sass Nested Properties

Posted by Jon Stuebe on .
Featured

Sass Nested Properties

Posted by Jon Stuebe on .

An underused feature that you may not know exists in sass is nested properties. It looks a little something like this:

p {
  font: {
      family: 'Helvetica', 'Arial', sans-serif;
      size: 1.25em;
  }
}

It enables you to "namespace" your similar css properties. In the above example anything that uses the prefix "font" can be nested. The above would compile to:

p {
    font-family: 'Helvetica', 'Arial', sans-serif;
    font-size: 1.25em;
}

If you still want to include the shorthand version of the property as well as others, you can still use the nested properties syntax:

.wrap {
    background: #ccc {
        image: url(../images/test.jpg);
        repeat: no-repeat;
    }
}

Here is the compiled version:

.wrap {
  background: #ccc;
  background-image: url(../images/test.jpg);
  background-repeat: no-repeat;
}
user

Jon Stuebe