Sass @mixin and @include
The @mixin directive allows us to define a style that can be reused throughout the stylesheet.
The @include directive can include a mixin into the document.
Defining a Mixin
A mixin is defined using the @mixin directive. @mixin name { property: value; property: value; ... }The following example creates a mixin named "important-text":
Sass code:
color: red;
font-size: 25px;
font-weight: bold;
border: 1px solid blue;
}
Note:In Sass, the hyphen - and the underscore _ are the same, meaning @mixin important-text { } and @mixin important_text { } are the same mixin.
Using a Mixin
The @include directive can be used to include a mixin:
Sass @include mixin syntax:
@include mixin-name;
}
Therefore, the code to include the important-text mixin is as follows:
Example
@include important-text;
background-color: green;
}
Convert the above code to CSS code, as shown below:
CSS code:
color: red;
font-size: 25px;
font-weight: bold;
border: 1px solid blue;
background-color: green;
}
A mixin can also include other mixins, as shown below:
Example
@include important-text;
@include link;
@include special-border;
}
Passing Variables to a Mixin
Mixins can accept parameters.
We can pass variables to a mixin.
Define a mixin that can accept parameters:
Example
@mixin bordered($color, $width) {
border: $width solid $color;
}
.myArticle {
@include bordered(blue, 1px); // Call the mixin and pass two parameters
}
.myNotes {
@include bordered(red, 2px); // Call the mixin and pass two parameters
}
The mixin parameters in the above example are properties for setting the border (color and width).
Convert the above code to CSS code, as shown below:
CSS code:
border: 1px solid blue;
}
.myNotes {
border: 2px solid red;
}
Mixin parameters can also define default values, with the syntax as follows:
Example
border: $width solid $color;
}
When including a mixin, you only need to pass the desired variable names and their values:
Example
border: {
color: $color;
width: $width;
style: dashed;
}
}
p { @include sexy-border(blue); }
h1 { @include sexy-border(blue, 2in); }
Convert the above code to CSS code, as shown below:
CSS code:
border-color: blue;
border-width: 1in;
border-style: dashed; }
h1 {
border-color: blue;
border-width: 2in;
border-style: dashed;
}
Variable Arguments
Sometimes, when you cannot determine how many parameters a mixin or a function will use, you can use...to set variable arguments.
For example, a mixin used to create box-shadow can take any number of box-shadow values as parameters.
Example
-moz-box-shadow: $shadows;
-webkit-box-shadow: $shadows;
box-shadow: $shadows;
}
.shadows {
@include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);
}
Convert the above code to CSS code, as shown below:
CSS code:
-moz-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
-webkit-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
}
Using Mixins for Browser Prefixes
Using mixins for browser prefixes is also very convenient, as in the following example:
Example
-webkit-transform: $property;
-ms-transform: $property;
transform: $property;
}
.myBox {
@include transform(rotate(20deg));
}
Convert the above code to CSS code, as shown below:
CSS code:
-webkit-transform: rotate(20deg);
-ms-transform: rotate(20deg);
transform: rotate(20deg);
}