Sass @ mixin and @ include
@mixin directive allows us to define a style that can be reused throughout the stylesheet.
@include directive can introduce mixin into the document.
Define a mix
Mixin through @mixin directive to define. @mixin name { property: value; property: value; ... } , the following example creates a mix named “important-text”:
Sass Code:
@mixin important-text {
color: red;
font-size: 25px;
font-weight: bold;
border: 1px solid blue;
}
Note: Sass connection symbols-and underscore symbols _ are the same, that is, @mixin important-text { } and @mixin important_text { } It’s the same blend in.
Use blending
@include directive can be used to include a mix:
Sass @include mix in the syntax:
selector {
@include mixin-name;
}
Therefore, include important-text the mixing code is as follows:
Example
.danger {
@include important-text;
background-color: green;
}
Convert the above code to CSS code, as follows:
Css Code:
.danger {
color: red;
font-size: 25px;
font-weight: bold;
border: 1px solid blue;
background-color: green;
}
Blending can also include blending, as follows:
Example
@mixin special-text {
@include important-text;
@include link;
@include special-border;
}
Pass variables to blending
Blending can receive parameters.
We can pass variables to the mix.
Define the blending that can receive parameters:
Example
/\* Mixing in and receiving two parameters \*/
@mixin bordered($color, $width) {
border: $width solid $color;
}
.myArticle {
@include bordered(blue, 1px); // Call mixing and pass two parameters
}
.myNotes {
@include bordered(red, 2px); // Call mixing and pass two parameters
}
The blending parameter of the above example is the property that sets the border ( color and width ).
Convert the above code to CSS code, as follows:
Css Code:
.myArticle {
border: 1px solid blue;
}
.myNotes {
border: 2px solid red;
}
You can also define default values for mixed parameters. The syntax format is as follows:
Example
@mixin bordered($color: blue, $width: 1px) {
border: $width solid $color;
}
When including blending, you only need to pass the required variable name and its value:
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); }
Convert the above code to CSS code, as follows:
Css Code:
p {
border-color: blue;
border-width: 1in;
border-style: dashed; }
h1 {
border-color: blue;
border-width: 2in;
border-style: dashed;
}
Variable parameter
Sometimes we are not sure how many arguments are used by a mixin or a function (function), so we can use… to set variable parameters.
For example, a mixin used to create a box box-shadow can take any number of``box-shadow`` as a parameter.
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);
}
Convert the above code to CSS code, as follows:
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;
}
Browser prefixes using blending
It is also very convenient for browser prefixes to be mixed, as shown in thefollowing example:
Example
@mixin transform($property) {
-webkit-transform: $property;
-ms-transform: $property;
transform: $property;
}
.myBox {
@include transform(rotate(20deg));
}
Convert the above code to CSS code, as follows:
Css Code:
.myBox {
-webkit-transform: rotate(20deg);
-ms-transform: rotate(20deg);
transform: rotate(20deg);
}