Join Joe Marini for an in-depth discussion in this video Working with mixins, part of CSS with LESS and Sass.
Similarly to LESS, Sass defines the concept of mixins.…Mixins let you define common properties once, and then reuse them over and over again throughout…your style sheet files.…Mixins are defined by using the @mixin directive, and this is different from LESS. Where LESS…let's you just use a class name to define a mixin, Sass actually requires that you use…the mixin directive.…So you write @mixin, then you give it the name of the mixin, and then you define the properties…inside the mixin class.…When you want to go use the mixin, you need to use the @include directive.…
So, in this case, I have a style rule, which is including the myMixin directive.…So this is slightly different than the way LESS does it, but the effect is the same.…So let's jump over the code and see.…Okay, so here in the snippets, I've scrolled down to the Sass Mixins example, and I've got…my SampleDoc, and I'm going to open up mixin_styles.scss,…and let's go ahead and copy some stuff.…So I'll copy the common traits into the style sheet over here.…
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