O'Reilly logo

Sass and Compass Designer's Cookbook by 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

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

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