Different Sass Output Styles

June 15, 2014 - Jake Bresnehan

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.