YouTipSass Mixin Include
The @mixin directive allows us to define a style that can be reused throughout the stylesheet.
The @include directive can be used to 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:
@mixin important-text{
color:red;
font-size:25px;
font-weight:bold;
border:1px solid blue;
}
**Note:** In Sass, the hyphen `-` and underscore `_` are interchangeable. This means `@mixin important-text { }` and `@mixin important_text { }` define the same mixin.
### Using a Mixin
The @include directive is used to include a mixin:
## Sass @include Mixin Syntax:
selector {
@include mixin-name;
}
Therefore, including the `important-text` mixin is done as follows:
## Example
.danger {
@include important-text;
background-color:green;
}
Converting the above code to CSS results in the following:
## CSS Code:
.danger{
color:red;
font-size:25px;
font-weight:bold;
border:1px solid blue;
background-color:green;
}
Mixins can also contain other mixins, as shown below:
## Example
@mixin special-text{
@include important-text;
@include link;
@include special-border;
}
* * *
## Passing Variables to a Mixin
Mixins can accept arguments.
We can pass variables to a mixin.
Defining a mixin that can accept arguments:
## Example
/* Mixin accepts two arguments */
@mixin bordered($color,$width){
border:$width solid$color;
}
.myArticle {
@include bordered(blue,1px);// Call the mixin, passing two arguments
}
.myNotes {
@include bordered(red,2px);// Call the mixin, passing two arguments
}
In the example above, the mixin arguments are properties for setting the border (color and width).
Converting the above code to CSS results in the following:
## CSS Code:
.myArticle{
border:1px solid blue;
}
.myNotes{
border:2px solid red;
}
Mixin arguments can also have default values, with the following syntax:
## Example
@mixin bordered($color:blue,$width:1px){
border:$width solid$color;
}
When including the mixin, you only need to pass the variable names and values you want to override:
## Example
@mixin sexy-border($color,$width:1in){
border:{
color:$color;
width:$width;
style:dashed;
}
}
p {@include sexy-border(blue);}
h1 {@include sexy-border(blue,2in);}
Converting the above code to CSS results in the following:
## CSS Code:
p {
border-color:blue;
border-width:1in;
border-style:dashed;}
h1 {
border-color:blue;
border-width:2in;
border-style:dashed;
}
### Variable Arguments
Sometimes, you may not know how many arguments a mixin or a function will use. In such cases, you can use `...` to set variable arguments.
For example, a mixin for creating box shadows can take any number of box-shadow values as arguments.
## Example
@mixin box-shadow($shadows...){
-moz-box-shadow:$shadows;
-webkit-box-shadow:$shadows;
box-shadow:$shadows;
}
.shadows {
@include box-shadow(0px 4px 5px#666,2px 6px 10px#999);
}
Converting the above code to CSS results in the following:
## CSS Code:
.shadows{
-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 shown in the following example:
## Example
@mixin transform($property){
-webkit-transform:$property;
-ms-transform:$property;
transform:$property;
}
.myBox {
@include transform(rotate(20deg));
}
Converting the above code to CSS results in the following:
## CSS Code:
.myBox{
-webkit-transform: rotate(20deg);
-ms-transform: rotate(20deg);
transform: rotate(20deg);
}