Different Sass Output Styles

When developing with Sass sometimes there is a need to adjust the output style of the CSS. Sass’s default CSS style is good but might not be applicable for all situations.

Sass supports four different output styles.

  • :nested
  • :compact
  • :expanded
  • :compressed

To understand what each of the above settings output consider the following snippet of code:


.widget-social {
    text-align: right;

    a,
    a:visited {
        padding: 0 3px;
        color: #222222;
        color: rgba(34, 34, 34, 0.77);
     }

    a:hover {
        color: #B00909;
    }

}

:nested


.widget-social {
  text-align: right; }
  .widget-social a,
  .widget-social a:visited {
    padding: 0 3px;
    color: #222222;
    color: rgba(34, 34, 34, 0.77); }
  .widget-social a:hover {
    color: #B00909; }

:expanded


.widget-social {
  text-align: right;
}
.widget-social a,
.widget-social a:visited {
  padding: 0 3px;
  color: #222222;
  color: rgba(34, 34, 34, 0.77);
}
.widget-social a:hover {
  color: #B00909;
}

:compact


.widget-social { text-align: right; }
.widget-social a, .widget-social a:visited { padding: 0 3px; color: #222222; color: rgba(34, 34, 34, 0.77); }
.widget-social a:hover { color: #B00909; }

:compressed


.widget-social{text-align:right}.widget-social a,.widget-social a:visited{padding:0 3px;color:#222222;color:rgba(34,34,34,0.77)}.widget-social a:hover{color:#B00909}

Adjusting the output

This comes down to what you are using for compiling. If you are using a GUI based app like CodeKit or LiveReload they tend to have options within each project. If you are using a JavaScript task runner like Grunt or Gulp with a Sass package you will have to pass the desired option to the config. Or if you happen to role with the command-line you can just pass in the setting using the --style flag like so:

sass --watch style.scss:style.css --style compressed

Each output option has its place but I would highly recommend using the compressed option (or a similar build task to minify) before uploading your styles to your server so your site loads as fast as possible to the end user.

4 Comments

  1. Thanks for this informative post! I am new to sass and I am also trying to learn grunt.

    I have a question about “compressed” style: When we use this style, is it also “minified” too? Or, should we use a css-minifier npm with grunt? What is the difference do you think about the file size?

    Please forgive me if I am asking a stupid question with an obvious answer. Thanks again!

    • Hey Recep,

      When using the “compressed” style it does minify your CSS so there is no need to also use the css-minifier package.

      In regards to file size it is hard to say with out seeing your files but the compressed style takes up the minimum amount of space possible and should be the way you server your files in production.

      I hope that helps and if you have any more questions, don’t hesitate to get in contact.

      Cheers,
      Jake

  2. Hi!, thanks Jake for this great article.
    Just one question.
    When i put in command line:

    sass –watch master.scss:style.min.css –style compressed

    The line works and create the file, but, when I check the file, the CSS content looks like a CSS “:expanded”.

    Am I doing something wrong?

    Thanks Jake.

    R.

    • Well, forget it, I was researching and all that I needed is put inside the project the command line:

      compass clean

      Restart my Apache local server

      Close CMD in Windows or Terminal in OS X.

      Start Again and voalá!

      I hope that this problem that I had, helped an another beginner in SASS.

This post currently has 4 responses. What do you think?

You can use basic HTML when posting code, please turn all < characters into &lt; or > into &gt;
If the code is multi-line, use <pre><code></code></pre>

Leave a Reply

Your email address will not be published. Required fields are marked *