Sass also lets you define nested styles, and again, if you saw this earlier in the section on LESS, this will look familiar to you. So you've probably seen CSS code that looks like this before, right? You have a class that defines some styles, and then you have the same class, but it uses some child selectors to define some more styles, and so on, and so forth, right? Here I have a base class named content, and then various child selectors terminating in an anchor tag that has a hover pseudo class style assigned to it as well. Now, as CSS code gets more and more complex, this kind of CSS structure can get more and more unruly to read.
Sass allows you to define styles in a nested format, which more closely mirrors the DOM structure of the document that you're styling. So, for example, I could rewrite the same CSS that you see here in a different format using nested styles. So, for example, I could define the outer content class like this, and then just put the contents that are specific to the paragraph child inside the content class, like this. I could also define the class for the anchor tag here. Now, remember that the anchor tag had a hover effect applied to it, so to define a nested style that refers to the parent, in this case, we need to have the :hover attach to the anchor; we use the ampersand character.
So in this case, the &:hover will say, hey, put this pseudo class on the parent of the rule that's currently being defined. So, in this case, the ampersand refers to this A tag right here. Okay, so let's go to the code editor, and see this working. Alright, so here I'm in the code editor, and I've scrolled down to my Nested Styles ExampleSnippets. I've got my SampleDoc right here, and let's open up nested_styles.scss. Okay, let's copy and paste.
So I'll put these guys in first, the body tag; alright. And so we'll just paste that, and we'll save. And remember, the Sass compiler is in the background, silently watching all these things that I'm doing, so it's updated the CSS code. What we're going to do now is open up the nested_styles.css, and you can see that it's compiled the CSS code into what you'd expect. We have the body definition, with some body specific properties, and then the paragraphs inside the body, except for this one paragraph that has the mypara ID.
So let's close this. Let's go back to the SampleDoc, put in nested_ styless.css, and fire this up in the browser. And you can see, it worked pretty much exactly as intended. The body has this sans serif font. Here we've got some Courier New, and this is Times right here. All right, let's go back to the code. All right, back in the code, let's copy another snippet, and that's this guy here. So we'll select these lines, and copy, and paste them in; all right.
So, in this case, I'm declaring a rule for the item that has the mypara ID, which is, recall, this paragraph right here. And we're giving it a color, and a border, and some padding, and we're using the ampersand character to define a pseudo class of hover. So this will resolve down to mypara:hover. So we'll save, and we'll open up the generated CSS again, and you can see that that's pretty much what happened. Here's the pseudo class right here, and here's all the settings that we put into that particular class.
All right, so let's save, and let's go back to the browser, and refresh. All right, so I refresh it, and you can see now that the mypara element has its border, and it's got a little hover effect on it. And just to show that it works, let's bring the same document up in Chrome. Okay; see the same effect. And let's bring the same document up in IE; same effect. Alright. So using nested styles, you can succinctly write your Sass code, so that when it's compiled, it will more closely match the DOM structure of your document, and make your CSS code a lot easier to read.
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