SASS different output styles

Sometimes developers need to adjust the output style of the CSS. SASS has four types of output style which make developers job easier.

Sass supports below four output styles.

:nested
:compact
:expanded
:compressed

Find the below example to understand more about CSS output.

SCSS SYNTAX:

.wrapper {
    width:100%;
    a,
    a:visited {
        color: #000;
        text-decoration: none;
     }
    a:hover {
        color: #333;
        text-decoration: underline;
    }    
}

:nested

.wrapper {
  width:100%; }
  .wrapper a,
  .wrapper a:visited {
    color: #000;
	text-decoration: none; }
  .wrapper a:hover {
    color: #333;
	text-decoration: underline; }

:compact

.wrapper { width:100%; }
.wrapper a, .wrapper a:visited { color: #000; text-decoration: none; }
.wrapper a:hover { color: #333; text-decoration: underline; }

:expanded

.wrapper {
  width:100%;
}
.wrapper a,
.wrapper a:visited {
  color: #000;
  text-decoration: none;
}
.wrapper a:hover {
  color: #333;  
  text-decoration: underline;
}

:compressed

.wrapper{width:100%;}.wrapper a,.wrapper a:visited{color: #000;text-decoration: none;}.wrapper a:hover{color: #333; text-decoration: underline;}

Output style applying method:

This comes down to what you are using for compiling. You can just pass in the setting using the --style flag.

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