Join Joe Marini for an in-depth discussion in this video Defining mixins with arguments, part of CSS with LESS and Sass.
Now that we've seen some of the basic features of Sass, let's move on to some more of the…advanced features, and we'll start by looking at mixins with arguments.…And you can see here in the Snippets file, I've scrolled down to the Advanced Sass section,…and this is Mixins with Arguments.…I've got my SampleDoc open right here, and let's go ahead and open up the mixargs_styles…document, where we will build our example.…Let's begin by copying over one of the snippets, and it's this first one right here, then we'll paste it in.…
So, here I have a mixin directive, and I'm creating a mixin called customBorder, and this mixin…takes three arguments.…So I've got width, color, and style.…And then inside the mixin, I've got a border definition with a nested syntax, so this will…become border width, border color, and border style.…So I am going to save that, and let's go copy the code that uses it, and we'll paste.…
This is like using any other mixin, except that in this case, I get to pass parameters…to the mixin, which helps customize the way the mixin behaves.…
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