Sass Output Style
The Sass output style is used to specify the CSS styling for the structure of document. We know that the Sass file automatically creates a default CSS style which reflects the structure of document. The default CSS styling is not perfect for all situations.
Sass supports many other output styles:
- Nested output style
- Expanded output style
- Compact output style
- Compressed output style
Nested Output Style
Nested output style is a default output styling of Sass. This styling is very useful when we deal with large CSS files. It makes the structure of the file more readable and can be easily understood.
Let’s take a simple example of nested SCSS file:
Expanded Output Style
The expanded output styling CSS takes more space compared to nested CSS style. The 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.
Let’s take a simple example of expanded SCSS file:
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.
Let’s take a simple example of compact SCSS file:
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. This way of styling is confusing and is not easily readable.
Let’s take a simple example of compressed SCSS file: