Syntactically Awesome Stylesheets

Sass is a language for writing stylesheets that improves on CSS in many ways. In this section, we cover two of the most important improvements, nesting and variables. (A third technique, mixins, is introduced in Section 7.1.1.)

                      As noted briefly in Section 5.1.2, Sass supports a format called SCSS (indicated with a .scss filename extension), which is a strict superset of CSS itself; that is, SCSS only adds features to CSS, rather than defining an entirely new syntax.9 This means that every valid CSS file is also a valid SCSS file, which is convenient for projects with existing style rules. In our case, we used SCSS from the start in order to take advantage of Bootstrap. Since the Rails asset pipeline automatically uses Sass to process files with the + extension, the custom.css.scss file will be run through the Sass preprocessor before being packaged up for delivery to the browser.

            Nesting

A common pattern in stylesheets is having rules that apply to nested elements. For example, in Listing 5.5 we have rules both for .center and for .center h1:

We can replace this in Sass with

Here the nested h1 rule automatically inherits the .center context. 

               There’s a second candidate for nesting that requires a slightly different syntax. In Listing 5.7, we have the code               

Here the logo id #logo appears twice, once by itself and once with the hover attribute (which controls its appearance when the mouse pointer hovers over the element in question). In order to nest the second rule, we need to reference the parent element #logo; in SCSS, this is accomplished with the ampersand character & as follows: