Skip to main content

Sass Output Style

The CSS file that the SASS generates consists of default CSS style, which reflects the structure of document.

The default CSS styling is good but might not be suitable for all situations; on other hand, SASS supports many other styles.

Sass supports different output style:

  • Nested Output Style
  • Expanded Output Style
  • Compact Output Style
  • Compressed Output Style

Nested Output Style​

Nested style is default styling of SASS.

Every property takes its own line and indentation of each rule is based on how deeply it is nested.

note

This style is very useful when we deal with large CSS files

Example:

#first {  
  background-color: #00FFFF;  
  color: #C0C0C0; }  
  #first p {  
    width: 10em; }  
.highlight {  
  text-decoration: underline;  
  font-size: 5em;  
  background-color: #FFFF00; }

Expanded Output Style​

The expanded output styling CSS takes more space compared to nested CSS style.

Each property of the expanded CSS styling has its own line.

Rule section contains the properties which are all intended within the rules, where as rules does not follow any indentation.

Example:

#first {  
  background-color: #00FFFF;  
  color: #C0C0C0;  
}  
#first p {  
  width: 10em;  
}  
.highlight {  
  text-decoration: underline;  
  font-size: 5em;  
  background-color: #FFFF00;  
}

Compact Output Style​

The compact CSS styling takes less space than expanded and nested output style.

Its main focus is on selectors rather than its properties. It contains selector and its properties in the same line.

Nested rules are positioned next to each other without a newline and the separate groups of rules will have newlines between them.

Example:

#first { background-color: #00FFFF; color: #C0C0C0; }  
#first p { width: 10em; }  
.highlight { text-decoration: underline; font-size: 5em; background-color: #FFFF00; }

Compressed Output Style​

The compressed CSS output styling takes the least amount of space compared to all other above discussed output styles.

It provides whitespaces only to separate selectors and newline at the end of the file.

note

This way of styling is confusing and is not easily readable.

Example:

#first{background-color:#00FFFF;color:#C0C0C0}  
#first p{width:10em}.highlight{text-decoration:underline;font-size:5em;background-color:#FFFF00}

Table of Contents