Sass Output Styles

Sass has four different CSS output style. By changing setting for :style option or using the --style command-line flag.

I will show you how Sass outputs this piece of SCSS code in all style options with style option explanation.

main {
 padding: 12px 24px;
 margin-bottom: 24px;
}
 
article  {
 background-color: #00ff00;
 color: red;
 border: 1px solid blue;
 
 p {
   font-size: 18px;
   font-style: italic;
   margin-bottom: 12px;
 }
}

:nested

Nested style is the default Sass style because it reflects the structure of the CSS styles in which each property has its own line, but the indentation is based on how deeply it’s nested. Example bellow:

main {
  padding: 12px 24px;
  margin-bottom: 24px; }
 
article {
  background-color: #00ff00;
  color: red;
  border: 1px solid blue; }
  article p {
    font-size: 18px;
    font-style: italic;
    margin-bottom: 12px; }

:expanded

In expanded style properties are indented within the rules, but the rules aren’t indendented in any special way like in :nested output style. Example bellow:

main {
  padding: 12px 24px;
  margin-bottom: 24px;
}
 
article {
  background-color: #00ff00;
  color: red;
  border: 1px solid blue;
}
article p {
  font-size: 18px;
  font-style: italic;
  margin-bottom: 12px;
}

:compact

In compact style each rule takes up only one line with every property defined on that line. It takes up less space than :nested and :expanded. Nested rules are placed next to each other with no newline, while separate groups of rules have newlines between them. Example bellow:

main { padding: 12px 24px; margin-bottom: 24px; }
 
article { background-color: #00ff00; color: red; border: 1px solid blue; }
article p { font-size: 18px; font-style: italic; margin-bottom: 12px; }

:compressed

Compressed styles takes up the minimum amount of space possible. There is no whitespace except space that is necessary to separate selectors and the newline on the end of the document. It is not meant to be human-readable but more for the production version . Also, it has some minor compression such as choosing the smaller representation for colours. Example bellow:

main{padding:12px 24px;margin-bottom:24px}article{background-color:#00ff00;color:red;border:1px solid blue}article p{font-size:18px;font-style:italic;margin-bottom:12px}

How to set output style

Output style can be set in different ways depending how you compile Sass files. If you are using GUI tools like CodeKit or LiveReload, they have option to set the Sass output style. You can set output style via command line by passing the --style flag in the setting, like this:

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

 If you are using Gulp or Grunt task runners with the Sass package than you can pass style option to the Sass config, like this:

gulp.task('sass', function () {
    gulp.src('scss/style.scss')
        .pipe(sass(outputStyle: 'compressed'))
        .pipe(gulp.dest('css'))
});

Thanks for reading!