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.

This post currently has no 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 *

Current ye@r *