CSS Output Styles4:55 with Guil Hernandez
Sass gives us the option to compress and compact our style sheets to make our websites load faster. In this video, we'll go over the four CSS output styles.
sass --watch scss:css --style nested
The default output style. It reflects the structure of the CSS styles and the HTML document. Each property has its own line, and rules are indented based on how deep they're nested in the original Sass code.
sass --watch scss:css --style expanded
Similar to the nested style. It looks more like the CSS we'd write in a regular style sheet. Each property and rule takes up one line and properties are indented within the rules.
sass --watch scss:css --style compressed
Minifies our CSS output by stripping out comments and unnecessary spaces. It compresses CSS to one line. The most optimized output style – use before uploading your CSS to the server.
sass --watch scss:css --style compact
Another optimized format that draws the focus to the CSS selectors instead of the properties. Each CSS rule takes up one line, with all properties defined on the same line.
You need to sign up for Treehouse in order to download course files.Sign up