Sass - Output Style

In this chapter, we will study about 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.

It supports the following different output styles −

:nested

Nested style is default styling of SASS. This way of styling is very useful when you are dealing with large CSS files. It makes the structure of the file more readable and can be easily understood. Every property takes its own line and indentation of each rule is based on how deeply it is nested.

For instance, we can nest the code in SASS file as shown below −

#first {
   background-color: #00FFFF;
   color: #C0C0C0; 
}

#first p {
   width: 10em; 
}

.highlight {
   text-decoration: underline;
   font-size: 5em;
   background-color: #FFFF00; 
}

:expanded

In expanded type of CSS styling each property and rule has its own line. It takes more space compared to the Nested CSS style. The Rules section consists of properties, which are all intended within the rules, whereas rules does not follow any indentation.

For instance, we can expand the code in the SASS file as shown below −

#first {
   background-color: #00FFFF;
   color: #C0C0C0;
}

#first p {
   width: 10em;
}

.highlight {
   text-decoration: underline;
   font-size: 5em;
   background-color: #FFFF00;
}

:compact

Compact CSS style competitively takes less space than Expanded and Nested. It focuses mainly on selectors rather than its properties. Each selector takes up one line and its properties are also placed in the same line. Nested rules are positioned next to each other without a newline and the separate groups of rules will have new lines between them.

For instance, we can compact the code in the SASS file as shown below −

#first { 
   background-color: #00FFFF; color: #C0C0C0; 
}

#first p { 
   width: 10em; 
}

.highlight { 
   text-decoration: underline; font-size: 5em; background-color: #FFFF00; 
}

:compressed

Compressed CSS style takes the least amount of space compared to all other styles discussed above. It provides whitespaces only to separate selectors and newline at the end of the file. This way of styling is confusing and is not easily readable.

For instance, we can compress the code in SASS file as shown below −

#first { 
   background-color:#00FFFF;color:#C0C0C0
} 

#first p { 
   width:10em 
} 

.highlight { 
   text-decoration:underline;font-size:5em;background-color:#FFFF00 
}
Advertisements