Join Joe Marini for an in-depth discussion in this video Exploring parameterized mixins, part of CSS with LESS and Sass.
- View Offline
In this chapter, we're going to take a look at some of the more advanced features of LESS.…We're going to start off by looking at mixins with arguments, and sometimes these are called…parameterized mixins.…If you recall from earlier in the title, we learned how to write mixins, and they looked…something like this.…I have a variable, and it's named @radius.…Then I define a mixin class named .border-radius.…You can see that the mixin for border-radius is using the value of the radius variable…wherever it is used inside the mixin.…
Then I can go ahead and use this mixin throughout my LESS style sheets wherever I want.…But wouldn't it be better if I had a way of changing the value of the variable simply…by passing an argument to the mixin class?…Well LESS actually lets you do this.…So instead of writing it this way, what I would instead do is write it like this.…So now I don't have a variable anymore;…now I'm passing an argument directly to the mixin class.…It works just like it did before.…So now anywhere the radius argument is used, the value represented by the argument is going…
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