Understanding SASS Output Formats

• SASS provides 4 different types of output formats for compiled css.

• Those format styles are as below:-

          —Nested :
               — This format is based on the relationship among the css classes.
               — This is better for understanding css classes relation.
               –It is useful for maintaining large css files.

          —Expanded:
              –This format maintains all spacing among css classes with curly braces ending in a new line.
              –It is better for development purpose.
              –It is human readable format.
   
          —Compact:
              –It takes less space then nested and expanded format.
              –It gives emphasis on css selectors.
              –all the style properties are defined in a single line per selector.

         —Compressed:
             –It takes very less space.
             –All css selector including style properties defined in single line.
             –Better for production purpose.

• You can check my previous post to know basic SASS configuration.

• In this Demo, “We are going check How to use this output format option and there output in the corresponding file”.

• We have used new-style.scss file for this demo.This file contains some scss code about a HTML DIV element.The below code shows the content of this scss file,

/*tutorialsavvy: SCSS file*/
$containerHeight : 50px;
$containerWidth : 600px;
$backgroundColor:#000000;
$fontSize:16px;
/*This is parent container from which all other container classes are extended*/
.container{
  height: $containerHeight;
  width :  $containerWidth;
  background: $backgroundColor;
  margin: 10px;
  font-size:  $fontSize;
}
.container-one{
  @extend .container;
  padding:2px;
}

• Let’s apply the nested output format using ‘–style’ switch with SASS watch option and the output file will be new-style-nested.css.

       command,
            sass –watch –style ‘nested’ new-style.scss:new-style-nested.css 
      screenshot,

  css output,

/*tutorialsavvy: SCSS file*/
/*This is parent container from which all other container classes are extended*/
.container, .container-one {
  height: 50px;
  width: 600px;
  background: black;
  margin: 10px;
  font-size: 16px; }

.container-one {
  padding: 2px; }

• Let’s apply the expanded output format using ‘–style’ switch with SASS watch option and the output file will be new-style-expanded.css.

          command,
            sass –watch –style ‘expanded’ new-style.scss:new-style-expanded.css
          screenshot,

  css output,

/*tutorialsavvy: SCSS file*/
/*This is parent container from which all other container classes are extended*/
.container, .container-one {
  height: 50px;
  width: 600px;
  background: black;
  margin: 10px;
  font-size: 16px;
}

.container-one {
  padding: 2px;
}

• Let’s apply the compact output format using ‘–style’ switch with SASS watch option and the output file will be new-style-compact.css.

          command,
            sass –watch –style ‘compact’ new-style.scss:new-style-compact.css
          screenshot,

  css output,

/*tutorialsavvy: SCSS file*/
/*This is parent container from which all other container classes are extended*/
.container, .container-one { height: 50px; width: 600px; background: black; margin: 10px; font-size: 16px; }

.container-one { padding: 2px; }

• Let’s apply the compressed output format using ‘–style’ switch with SASS watch option and the output file will be new-style-compressed.css.

          command,
            sass –watch –style ‘compressed’ new-style.scss:new-style-compressed.css
          screenshot,

     css output

.container,.container-one{height:50px;width:600px;background:#000;margin:10px;font-size:16px}.container-one{padding:2px}