Join Joe Marini for an in-depth discussion in this video Using output-style formatting, part of CSS with LESS and Sass.
One of the nicer features of Sass over LESS is that Sass gives you some nice control over…the formatting options of how CSS code is generated when the Sass code is compiled into CSS.…There's a couple of different options you can use, and it's specified using the dash dash style…option at the command line.…There's the nested format, which is the default format that Sass uses if you don't give it…one, and this displays your CSS code indented in a certain way, with classes underneath each other.…
The expanded format is the most human-friendly, readable format.…This is where braces are on separate lines, each property is on a separate line, and so on.…There's the compact format, in which case the CSS output is condensed, but it's still readable.…And then finally, there's the compressed option, which is the minimized output, and this is…probably what you want to use in your production environment.…Let's take a look at how Sass converts code in real time. We'll jump over to the code to see this.…
The first section focuses on LESS (Leaner CSS) and how it can be used on both the client and the server. The lessons show how to work with variables, mixins, nested rules, and other features to easily create maintainable CSS.
The second section introduces Sass (Syntactically awesome stylesheets), which contains many of the same features as LESS, along with a few new ones. Joe also compares and contrasts the two tools, and explains how your platform and needs may influence which tool you choose.
- What are LESS and Sass?
- Using variables in your CSS
- Working with reusable and parameterized mixins
- Implementing nested rules
- Combining CSS rules with operations
- Using the built-in functions in LESS and Sass
- Controlling the CSS output formatting
- Importing external files