Join Joe Marini for an in-depth discussion in this video Working with mixins, part of CSS with LESS and Sass.
Another really great feature of LESS is the notion of what are called mixins. Mixins are pretty much what their name implies; they let you define common properties once, and then reuse them throughout the rest of your CSS. Let's take a simple example. To define a mixin, you define it like you would define any other CSS rule set. So here I have a class named .myMixin, and I'll just define some properties in there for our font size, and for background color.
I've defined some properties, and if I want to reuse these elsewhere in my styles, all I need to do is, inside the name of my style sheet, just include the name of the mixin class. So I would define a rule named myStyle, and then just include the .myMixin right inside the rule itself. You can imagine if I have a whole bunch of places where the style rules for various elements differ by only a few properties, but they reuse a lot of common ones, I can just define a mixin class that holds all the common properties, and in fact, I can use more than one if I want to, and then just include them within the style rules where I need to use them.
Let's see this in action by jumping over to the code. I've got my ExampleSnippets open. Scroll down to the Mixins section for Chapter 2, and I've got my SampleDoc, which is the same as the one we've been using. We're going to use it now to show how mixins work. Let's open up the mixin_styles.less file, and right now it's blank, because we're going to be building it. So over in the Snippets, let's go ahead and copy over the first part of our example. So I'll copy those lines right there for commonTraits, and paste them in.
What I've done is defined a set of properties that are going to be used more than once in my style sheet. So I have a border-radius, I've got a border setting, and some padding. So let's go back to the Snippets. Let's copy over the rest of the class definitions here. So for header and footer, we're going to copy, and we're going to paste. What I've done is defined a couple of style sheet rules; one for the header, one for the footer, and you can see that, in this case, the only difference is that their color differs slightly.
So for the header, I've got this hex color, for the footer, I've got this hex color. But other than that, they share the same properties for our border-radius, border, and padding. And to use those inside the class definitions, I simply put the name of the mixin class inside the rule definition. And again, if I had more than one mixin class defined, I would just simply list them off as many times as I wanted to use them. I could have another traits section. I could have another section defined just for borders, and use them as many times as I want.
Let's save. Now we're going to jump over to the Sample Document, and remember that in the background, the SimpLESS compiler has compiled this for us. So now I'm just going to go ahead and refer to the mixin CSS file that's generated, and just to make sure that everything is okay, let's go ahead and open that up. And you can see that the mixin_styles.css file has been generated, and it's minified. Just for grins, let's go ahead and format this, so you can see it in its unminified state.
So you can see that what happened was here are the commonTraits, and everywhere in the LESS where I had the word commonTraits, I've had these properties replaced. So we just did a search and replace substitution. So I'm just going to go ahead and undo that. Let's go back to the Sample Document, and we'll save it, and let's bring it up in the browser. And you can see that the color is different in each case. We've got some darker colors up here for the text, a lighter color down here, but the border property is the same in both.
So we have a 1 pixel green border, with some rounded corners, and those are the common traits that are shared between the header and the footer. Let's go back to the code for a second. And just to prove you that this works cross-browser, let's also bring it up in IE, and you can see it works fine in IE. And let's bring it up in Chrome, and you can see it's working just fine in Chrome as well. So using mixin classes allows you to group sets of properties that are common together, and you can define as many of these as you want, and then reuse them in your CSS code.
This alone will probably cut down a lot of work that you need to do in maintaining complex CSS files.
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