Choosing your output style

When compiling Sass code into CSS code, you can choose between four different output styles: expanded, nested, compacted, and compressed. The nested style is the default style. In this recipe, you will learn the differences between these output styles and how to choose one for your projects.

Getting ready

You should have the Ruby Sass command line ready, as described in the Installing Sass for command line usage recipe of this chapter. You will also need a text editor.

How to do it...

Perform the following step to see the differences between the Sass output styles:

1. Create an output.scss file and type the following Sass code into it:

   $base-color: blue;
   $link-color: orange;
   $hover-color: red;
   
   p {
     color: $base-color;
     
     a {
       color: $link-color;
       
       &:hover {
         color: $hover-color;
       }
       
     }
   }

   After creating the file mentioned earlier, you should compile this file into CSS with the four different output style options.

2. Firstly, compile the output.scss file with the option by running the following command in your console:

   sass --style expanded output.scss
   

   The preceding command outputs the CSS code as follows:

   p {
     color: blue;
   }
   p a {
     color: orange;
   }
   p a:hover {
     color: red;
   }

3. Then, run the following command:

   sass --style nested output.scss
   

   The preceding command outputs as follows:

   p {
     color: blue; }
     p a {
       color: orange; }
       p a:hover {
         color: red; }

4. The third command you run will be:

   sass --style compacted output.scss
   

   The third command outputs the following CSS code:

   p {
   
     color: blue; }
   
   p a {
   
     color: orange; }
   
   p a:hover {
   
     color: red; }

5. Finally, run the following command:

   sass --style compressed output.scss
   

   The last command outputs the following line of CSS code:

   p{color:blue}p a{color:orange}p a:hover{color:red}

How it works...

Sass enables you to choose your output style by setting the --style command-line flag. In this recipe, you have seen the different output styles of Sass. The first expanded style produces CSS code formatted in a manner that would allow you to write it yourself when directly coding your CSS code. In fact, the output has not got any special syntax or format.

The second and default style you have tried is the nested style. In the Using nested selectors recipe of Chapter 4, Nested Selectors and Modular CSS, you can read about the ability of nesting selectors in Sass. The nested style makes the nesting of selectors in your Sass code visible in the compiled CSS code by adding additional indents before the selectors that are nested. Notice that the real nesting of selectors is not possible in a valid CSS code, so the selectors are not nested in the compiled CSS. Because the indent helps reflect the structure of the CSS styles and the HTML document, it will make your code more readable and easier to debug. In Chapter 2, Debugging Your Code, of this book, you can read more about testing and debugging your Sass and compiled CSS code.

Finally, the compact and compressed output styles reduce the file size of the compiled CSS code. The fewer the number of bytes of the CSS code to download, the faster your website or app will load, which improves user experience too. The compact output style reduces the number of white space by not having nesting and each selector on a single line, while the compressed output style only has minimal white spaces required to meet the CSS specification. When using the compressed output style, the compiled CSS code has no whitespace except that necessary to separate selectors and a newline at the end of the file.

The compact output style and especially the compressed output styles are not intended to be read by humans. In most situations, you will use the default nested output style for the development stage of your project. When taking your project into production, you should compile your CSS code with the compressed output style. When you are using CSS source maps to debug your code, as described in the Using CSS source maps to debug your code recipe of Chapter 2, Debugging Your Code, your output style for the development stage does not matter.

The compressed output styles also remove all your comments. You can read how to comment your code and which comments are preserved in the Commenting your code in SCSS syntax recipe of Chapter 2, Debugging Your Code.

There's more...

When using Compass, as described in Chapter 6, Using Compass, of this book, to compile your Sass code, you can choose the same output styles as described in the previous section. Output styles are set in the config.rb file of your Compass project. When not explicitly setting the environment option to production, Compass uses the expanded output style. In the production environment the compressed output style had been used.

You have already read that the compressed output style removes all the extra white space. Also, colors are converted to their shortest notation. Further optimization of your CSS code is possible, but it is not a task for Sass. Postprocessors, such as clean-css, also perform a more advanced optimization of your CSS code like selector, property, and media query merging. In the Automatically prefixing your code with Grunt recipe of Chapter 16, Setting up a Build Chain with Grunt, you can read about how to integrate the clean-css plugin and other postprocessors into your build chain.

See also

You can find the clean-css CSS minifier for node.js at https://github.com/jakubpawlowicz/clean-css.