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 stypng 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 stypng of SASS. This way of stypng is very useful when you are deapng with large CSS files. It makes the structure of the file more readable and can be easily understood. Every property takes its own pne 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; 
}

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

:expanded

In expanded type of CSS stypng each property and rule has its own pne. 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;
}

.highpght {
   text-decoration: underpne;
   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 pne and its properties are also placed in the same pne. Nested rules are positioned next to each other without a newpne and the separate groups of rules will have new pnes 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; 
}

.highpght { 
   text-decoration: underpne; 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 newpne at the end of the file. This way of stypng 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 
} 

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