Join Joe Marini for an in-depth discussion in this video Exploring mixins and pattern matching, part of CSS with LESS and Sass.
- View Offline
LESS mixins can also be defined with an advanced feature called pattern matching, and that's…what we're going to cover in this movie.…So you can see here in my Snippets file, I've scrolled down to Chapter 3: Mixins with Pattern…Matching, and I've got my Sample Document open, and I've also got my example file for this…particular movie called mixpats_styles.less open.…Rather than explain how this works as we go, let me copy a few things over, and then I'll…explain it once I'm done.…So I am going to start off by copying these lines here, the ones for .alert(warning), and….alert(error), paste them in over here, and then I'm going to copy this one down here…with this @_ definition, and I'll paste that in.…
And then the last thing I am going to do is go get my rule definition that uses the mixin,…and I'll paste that in down here.…So let's take a quick review of what it is I'm doing.…You can see that I've defined a mixin called .alert, but I defined it more than once.…I've defined it to take a keyword called warning, I've defined it to take a word called error,…
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