The power of Sass in your project

Sass is a preprocessor for CSS code and is an extension of CSS3 which adds nested rules, variables, mixins, functions, selector inheritance, and more. In the following section, you can read how Sass extends the CSS syntax and helps you to DRY code your CSS.

Nested rules

Nested rules greatly enhance the efficiency of composing styles. For example, writing selectors in CSS can be highly repetitive:

.navbar-nav { ... } 
.navbar-nav > li { ... } 
.navbar-nav > li > a { ... } 
.navbar-nav > li > a:hover, 
.navbar-nav > li > a:focus { ... } 

This same set of selectors and their styles can be written much more easily in Sass, by means of a simple nesting pattern as shown in the following SCSS code:

.navbar-nav { ... 
  > li { ... 
    > a { ... 
      &:hover, 
      &:focus { ... } 
    } 
  } 
} 

Once compiled, these rules come out as standard CSS. But, the nesting pattern makes the Sass styles much easier to write and maintain...