(click anywhere to close)
OPEN MENU

[SASS] Mixins

category: Website | course: SASS | difficulty:
IN PRINT
QUICK CONTENTS:Intro

We’ve seen how to store values and lists of values, but what if we want to store a bunch of declarations? That’s when we use mixins.

To create a mixin, we need to make up a name and determine the variables it will use. Then, we use the following syntax

@mixin some-function-name(variable1, …, variablen) { declarations }

Now we’ve created our mixin, but how do we use it? For this, we need to include it somewhere with the following syntax

@include some-function-name(value1, …, valuen);
@mixin set-border-radius($radius) {
	border-top-left-radius:$radius;
	border-top-right-radius:$radius;
	border-bottom-left-radius:$radius;
}

//Now paragraphs have border radius of 10px on all corners, except bottom right
p {
	@include set-border-radius(10px);
}

As you can see, not only can you easily copy the same set of declarations around, you can also change the parameters every time you include it. If you know you’re going to use the same parameters every time, you can of course ditch the variables and just use fixed values within the mixin.

Mixins are especially useful when working with vendor-prefixes. Instead of retyping the same property for all browsers, just put it inside a mixin.

CONTINUE WITH THIS COURSE
Do you like my tutorials?
To keep this site running, donate some motivational food!
Crisps
(€2.00)
Chocolate Milk
(€3.50)
Pizza
(€5.00)