Setting output style
The various ways of setting the sass output styles are as follows:-
-
GUI(Graphical User Interface) tools like CodeKit or LiveReload, have options to set the Sass output style.
-
We can set output style via the command line by passing the --style flag in the setting.
Example:
sass --watch style.scss:style.css --style compact
This will set the sass output style as compact.
-
While using gulp or grunt task runners with the sass package, we can pass the style option to the sass config.
Example:
gulp.task('sass', function () {
gulp.src('scss/style.scss')
.pipe(sass(outputStyle: 'expanded'))
.pipe(gulp.dest('css'))
});
You can also try this code with Online Javascript Compiler
This will set the sass output style as expanded.
Nested Sass output style
The nested output style reflects the structure of the CSS styles in which every property takes its own line, and the indentation of each rule is based on its nested depth.
The nested output style is handy while dealing with large CSS files. It makes the file structure more readable and understandable.
To set the CSS output to nested output style, we can use this command:
sass --watch styles.scss:styles.css --style nested
Example:
div {
background-color: black;
color: white; }
.topDiv {
font-size: 2rem; }
.middleDiv {
font-size: 2.4rem; }
.bottomDiv {
font-size: 2.8rem; }
.headline {
text-decoration: underline;
font-size: 3em;
color: yellow; }
Expanded Sass output style
The expanded output style takes more space compared to the nested output style. Each property of the expanded output style has its own line. The Rules section consists of properties, all of which are intended within the rules, whereas rules do not follow any indentation. This output style looks like most human-made style sheets.
To set the CSS output to nested output style, we can use this command:
sass --watch styles.scss:styles.css --style expanded
Example:
div {
background-color: black;
color: white;
}
.topDiv {
font-size: 2rem;
}
.middleDiv {
font-size: 2.4rem;
}
.bottomDiv {
font-size: 2.8rem;
}
.headline {
text-decoration: underline;
font-size: 3em;
color: yellow;
}
Compact Sass output style
The compact output style takes less space than the expanded and nested output styles. Here the main focus is on selectors rather than their properties. Each selector takes up one line, and its properties are also placed in the same line. The nested rules are positioned next to each other without a newline, and the separate groups of rules will have new lines between them.
To set the CSS output to nested output style, we can use this command:
sass --watch styles.scss:styles.css --style compact
Example:
div { background-color: black; color: white; }
.topDiv { font-size: 2rem; }
.middleDiv { font-size: 2.4rem; }
.bottomDiv { font-size: 2.8rem; }
.headline { text-decoration: underline; font-size: 3em; color: yellow; }
Compressed Sass output style
The compressed out style takes the least space compared to all other above-discussed sass output styles. It provides whitespaces only to separate selectors and newlines at the end of the file. This is often confusing and is not easily readable.
The compressed output styles remove all the comments from the code. Also, the colors are converted to their shortest notation. It is perfect for production sites, where it's essential to keep file sizes as minimum as possible.
To set the CSS output to nested output style, we can use this command:
sass --watch styles.scss:styles.css --style compressed
Example:
div{background-color:black;color:white}.topDiv{font-size:2rem}.middleDiv{font-size:2.4rem}.bottomDiv{font-size:2.8rem}.headline{text-decoration:underline;font-size:3em;color:yellow}
FAQs
-
Which is the default sass output style?
By default, the sass output style is the nested output style.
-
What is the benefit of using compact and compressed output styles?
The compact and compressed output styles reduce the size of the compiled CSS code. As the number of bytes of the CSS code to download reduces, our website or app loads faster, improving the user experience.
-
When is nested output style used?
The nested output style is used for the project's development stage as it has better readability. When taking our project into production, we must compile the CSS code with the compressed output style.
-
Which sass output syles are not human-readable?
The compact output style and especially the compressed output styles are not intended to be read by humans.
Key Takeaways
This blog covered the various sass output styles: nested output style, expanded output style, compact output style, and compressed output style, along with examples. We also discussed setting the sass output styles and the frequently asked questions related to sass output styles.
Don't stop here! Check out some fantastic blogs on Sass like Sass- Introduction, Sass-Installation, and Usage, etc.
We hope you found this blog on sass output style useful. Liked the blog? Then feel free to upvote and share it.
311+ registered 
