Free Your MIND (And Your SASS Will Follow) – pt. 4 of 4 on this CSS3 extension

SASS LogoHello! This is our last piece in our little Learning SASS series, so if you’re new here make sure that you check out the first, second, and third parts to help get up to speed.  So far we’ve looked at some of the great things that SASS has to offer: variables functions, importing other stylesheets, etc.  This time we’re going to be looking at what is arguably the most powerful feature of SASS, mixins.

Mixins work a lot like a class might in a standard programming language, allowing you to assign a generalized group of properties to a style. Even more so, you can pass arguments to these mixin to make them even more powerful.

Your Basic SASS Mixin

Mixins work a lot like including another SASS file, you declare a group of styles in one place and then use an @include to use them in another. For example, you might use a mixin to do the following:

@mixin rounded-div {
border-radius: 5px;
border: solid black 2px;
width: 500px;

#divbox1 { @include rounded-div; }
#divbox2 { @include rounded-div; }

As is, this mixin cuts down on the amount of repetitive code drastically. Once you add in arguments though, you can see that mixins become much more useful, i.e.:

@mixin rounded-div($radius, $border-size, $width)
border-radius: $radius;
border: solid black $border-size;
width: $width;

#divbox1 { @include rounded-div(2px, 2px, 400px); }
#divbox2 { @include rounded-div(5px, 5px, 500px); }

Now our mixin allows us to create similar objects with varying values to their standard properties!

By taking advantage of SASS and all of its abilities, you could easily create an entire site that relies on only a few variables to decide all of the styles for a web page. If your careful, you might even be able to get away only having to change a few lines of code at the top of your .scss file instead of the typical “find and replace” method of editing CSS.

If you have any questions about SASS (or pretty much anything else), want to tell us about the cool ways you’ve been using SASS, or want us to write some more how-tos on something, please leave a comment below and we’ll be sure to get back to you!

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.