Sass Basics: The Mixin Directive

For me finding Sass was a revelation. For the longest time I had tired of writing plain or 'vanilla' CSS. For a small site it was fine, but for larger sites the CSS quickly got out of hand. Debugging was a nightmare and I couldn't help but feel like I could do more with my CSS.

I found Sass and everything changed. With Sass I could break my CSS down into modular chunks to make troubleshooting a breeze. I could also use programming concepts, such as functions and variables, when creating my CSS. And most importantly Sass introduced me to Mixins.

What is a mixin

A mixin allows us to create reusable chunks of CSS. Being able to do this helps us to avoid writing repetitive code. For example:

[code="css"] a:link {color: white;} a:visited {color: blue;} a:hover {color: green;} a:active {color: red;} [/code]

Writing this code over and over again can get old very quickly, especially of you have a large site with a lot of links. With a mixin creating link can be done with Sass like this.

[code="sass"] @mixin linx ($link,$visit,$hover,$active) { a { color: $link; &:visited { color: $visit; } &:hover { color: $hover; } &:active { color: $active; } } } [/code]

How to include a mixin

To make use of a mixin you have to include it in your Sass files. To call the link mixin from above we would add this line.

Continue reading %Sass Basics: The Mixin Directive%

by Reggie Dawson via SitePoint