O'Reilly logo

Bootstrap 4 Site Blueprints by Ian Whitley, David Cochran, Bass Jobsen

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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 { ... ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required