Sometimes developers need to adjust the output style of the CSS. SASS has four types of output style which make developers job easier.
Sass supports below four output styles.
:nested
:compact
:expanded
:compressed
Find the below example to understand more about CSS output.
SCSS SYNTAX:
.wrapper {
width:100%;
a,
a:visited {
color: #000;
text-decoration: none;
}
a:hover {
color: #333;
text-decoration: underline;
}
}
:nested
.wrapper {
width:100%; }
.wrapper a,
.wrapper a:visited {
color: #000;
text-decoration: none; }
.wrapper a:hover {
color: #333;
text-decoration: underline; }
:compact
.wrapper { width:100%; }
.wrapper a, .wrapper a:visited { color: #000; text-decoration: none; }
.wrapper a:hover { color: #333; text-decoration: underline; }
:expanded
.wrapper {
width:100%;
}
.wrapper a,
.wrapper a:visited {
color: #000;
text-decoration: none;
}
.wrapper a:hover {
color: #333;
text-decoration: underline;
}
:compressed
.wrapper{width:100%;}.wrapper a,.wrapper a:visited{color: #000;text-decoration: none;}.wrapper a:hover{color: #333; text-decoration: underline;}
Output style applying method:
This comes down to what you are using for compiling. You can just pass in the setting using the --style flag.
sass --watch style.scss:style.css --style compressed
shanidkv
December 6, 2015