Join Joe Marini for an in-depth discussion in this video Using nested rules, part of CSS with LESS and Sass.
LESS also lets you define what's known as nested rules.…Now, nested rules are a bit more of a stylistic thing than a real feature functionality thing,…but they come in handy on their own.…If you've written a whole bunch of CSS code before, you have probably come across CSS…that looks something like this.…You have a whole bunch of classes, and then child selector,s and then you might have something…like a child selector with a pseudo class on it.…It can be pretty hard to read for nontrivial cases.…It seems pretty easy to read here, because I don't have a whole lot of text on the screen,…but for styles that build on each other, where you've got some styles defined in a parent style,…and then some more styles to find in a child of that parent, and then so on, and so on, this…can get to be pretty eye straining, and it leads to maintainability problems.…
To help solve this problem, LESS lets you write nested rules, which allows you to create…rules that look a lot more like the DOM structure of your document.…
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