Select Page
Beginner’s Guide To Sass – Mixins

Beginner’s Guide To Sass – Mixins

Sass Mixins are best explained as, for example, JavaScript Functions. You have a code that you want to do something, oke, but you can give it parameters and make it fully adjust to what you wanna have it do.

MIXINS ARE LIKE FUNCTIONS, REALLY

Basically, Mixins allow you to take a group of CSS properties and bundle them together, adding them up to a class or an ID you want. Imagine this: You have two major types of buttons on your site: primary button, and some sort of secondary button. In one case, you want a button to have one set of properties, in the other – something else.

Here’s an example of what we could do. All Sass Mixins are declared by stating @mixin in front, then the mixin name and optional arguments, and then the usual CSS:

This would produce this output:

Sounds like it was a lot less code to just write out the CSS, right? Wrong. Even thou it really does lessen the amount of actual code for this one, single button, let’s create two more! Here’s the Sass code:

And here’s the result:

And that’s all repetitive copy/paste work that you didn’t have to do! Keep in mind that the actual button-creating magic is in the mixin. You can (and will, I hope) separate Mixins and variables from the rest of the Sass code, and then the only thing you’ll be looking in your new framework creation is actually… just… this:

So I hope you are starting to see the power that you can utilize here. Mixins are ESPECIALLY useful with the CSS3 and a ton of vendor prefixes like -webkit, -moz, -ms, -o that can be used. Why not creating just a simple @mixin border-radius($radius) function using all that, and then just use it by including it, so you don’t have to pollute your CSS that with tons of same copy/pasted stuff that you really need to include? Example:

Play around, and I hope you’ll start to feel the real power here. 🙂

Until next time… Ciao! <3