Sass Nested Rules and Properties

Sass Nested Rules

Consider an example of Sass code for a website’s navigation, where you can nest CSS selectors similarly to HTML structure.

Example

SCSS Syntax:

nav {
ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
li {
    display: inline-block;
  }
a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

In Sass, the ul, li, and a selectors are encapsulated within the nav selector through nesting.

Contrarily, in CSS, these rules are defined individually, not nested.

CSS Syntax:

nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
}
nav a {
display: block;
padding: 6px 12px;
text-decoration: none;
}

Due to the ability to nest properties in Sass, it offers a cleaner and more readable syntax compared to standard CSS.

Sass Nested Properties

With Sass, you can organize properties with shared prefixes, such as font-family, font-size, and font-weight, or text-align, text-transform, and text-overflow, in a nested structure for improved readability and maintainability.

Example

SCSS Syntax:

font: {
family: Helvetica, sans-serif;
size: 18px;
weight: bold;
}

text: {
align: center;
transform: lowercase;
overflow: hidden;
}

The Sass transpiler will transform the aforementioned Sass code into standard CSS.

CSS Output:

font-family: Helvetica, sans-serif;
font-size: 18px;
font-weight: bold;

text-align: center;
text-transform: lowercase;
text-overflow: hidden;