When developing with Sass, sometimes there is a need to adjust the output style of the CSS. Sass’s default CSS style is good but might not be applicable for all situations.
Sass supports four different output styles:
- :nested
- :compact
- :expanded
- :compressed
To understand what each of the above settings output consider the following snippet of code:
.widget-social {
text-align: right;
a,
a:visited {
padding: 0 3px;
color: #222222;
color: rgba(34, 34, 34, 0.77);
}
a:hover {
color: #B00909;
}
}:nested
.widget-social {
text-align: right; }
.widget-social a,
.widget-social a:visited {
padding: 0 3px;
color: #222222;
color: rgba(34, 34, 34, 0.77); }
.widget-social a:hover {
color: #B00909; }:expanded
.widget-social {
text-align: right;
}
.widget-social a,
.widget-social a:visited {
padding: 0 3px;
color: #222222;
color: rgba(34, 34, 34, 0.77);
}
.widget-social a:hover {
color: #B00909;
}:compact
.widget-social { text-align: right; }
.widget-social a, .widget-social a:visited { padding: 0 3px; color: #222222; color: rgba(34, 34, 34, 0.77); }
.widget-social a:hover { color: #B00909; }:compressed
.widget-social{text-align:right}.widget-social a,.widget-social a:visited{padding:0 3px;color:#222222;color:rgba(34,34,34,0.77)}.widget-social a:hover{color:#B00909}Adjusting the output
This comes down to what you are using for compiling. If you are using a GUI based app like CodeKit or LiveReload they tend to have options within each project. If you are using a JavaScript task runner like Grunt or Gulp with a Sass package you will have to pass the desired option to the config. Or if you happen to role with the command-line you can just pass in the setting using the --style flag like so:
sass --watch style.scss:style.css --style compressed
Each output option has its place but I would highly recommend using the compressed option (or a similar build task to minify) before uploading your styles to your server so your site loads as fast as possible to the end user.
Thanks for this informative post! I am new to sass and I am also trying to learn grunt.
I have a question about “compressed” style: When we use this style, is it also “minified” too? Or, should we use a css-minifier npm with grunt? What is the difference do you think about the file size?
Please forgive me if I am asking a stupid question with an obvious answer. Thanks again!
Hey Recep,
When using the “compressed” style it does minify your CSS so there is no need to also use the css-minifier package.
In regards to file size it is hard to say with out seeing your files but the compressed style takes up the minimum amount of space possible and should be the way you server your files in production.
I hope that helps and if you have any more questions, don’t hesitate to get in contact.
Cheers,
Jake
Hi!, thanks Jake for this great article.
Just one question.
When i put in command line:
sass –watch master.scss:style.min.css –style compressed
The line works and create the file, but, when I check the file, the CSS content looks like a CSS “:expanded”.
Am I doing something wrong?
Thanks Jake.
R.
Well, forget it, I was researching and all that I needed is put inside the project the command line:
compass cleanRestart my Apache local server
Close CMD in Windows or Terminal in OS X.
Start Again and voalá!
I hope that this problem that I had, helped an another beginner in SASS.
Hi Jake,
I have couple of question about sass and compass to how to make css compressed with no comment and any package in sublime text to colored sass and adminstrated without ruby console ?
I just start using Sass and really have fun when i write css anymore, and this article helped me about the output style format.
Thanks !
I am trying to figure out how to output a seperate css file for one particular scss file. In other words, all the scss files would compile into a main.css file, with the exception of unique.scss. That would compile to unique.css, but still inherit the variables, mixins, etc. used to compile the main.css file. How can I do this?
Hey Joe,
One way to go about this is to import all your sass files into main and also import only the ones you want into the uniques sass file.
The below command will watch the main.scss and unique.scss files and output a main.css and unique.css.
sass --watch sass/main.scss:main.css sass/unique.scss:unique.cssHope that helps.
Nice guide, I’d love to see which styles strip comments out and which do not.
This is very good guild!
Thanks for this post!