Join Joe Marini for an in-depth discussion in this video Working with guarded mixins, part of CSS with LESS and Sass.
LESS provides a way of writing mixins called guarded mixins that are very similar to pattern…matching mixins, except that they match on expressions, rather than simple values, or function…signatures, or what we call arity sometimes.…If you haven't watched the movie on pattern matching mixins yet, you should probably stop…here, go watch that, and then come back to this one.…In this chapter, we'll cover guarded mixins.…In my ExampleSnippets file, I scroll down to Chapter 3: Guarded Mixins.…
I got my Sample Document open, and I'm going to do the work in mixguards_styles.less file.…Let's go back to the snippets, and before we copy all these over, let's just take one line, and analyze it.…We'll copy that, we'll paste this, and we'll close it off.…This mixin right here called . text3d takes a single value called color.…What makes it a guarded mixin is this keyword right here: when. When this condition is true,…that is when this mixin will be applied.…
Now, this particular mixin only has one condition, and you can see that it's calling a function called lightness,…
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