Mixin | Sass
Sass Mixin
Sass Mixin
Mixin in Sass
Saas @mixin directive
In Saas, you can think of @mixin directive as function. They make code capable to be reusable.
You can reuse @mixin code use @include directive.
@mixin mixin1 {
color:maroon;
font-size:12px;
}
Saas @include directive
@include directive is used to call the @mixin code just like set property values but do not include :
@include mixin1;
@mixin ol-1 {
ol, ul {
margin-left: 2em;
}
li {
font-weight: bold;
text-align: center;
padding: 2px;
}
}
#list {
@include ol-1;
}
#list ol, #list ul {
margin-left: 2em;
}
#list li {
font-weight: bold;
text-align: center;
padding: 2px;
}
We can use=for@mixindirective and+for@includedirective to simplify the code simpler.
Saas Arguments
Arguments in Sass
Saas Mixins support passing arguments as variables. Passing variable arguments take an easy breath for cross browser support of css. Following code gives vendor prefixed properties with one-use.
@mixin round-border($value){
-moz-border-radius: $value;
-ms-border-radius: $value;
-o-border-radius: $value;
-webkit-border-radius: $value;
border-radius: $value;
}
@mixin rotate($deg) {
-moz-transform: rotate($deg);
-ms-transform: rotate($deg);
-o-transform: rotate($deg);
-webkit-transform: rotate($deg);
transform: $deg;
}
div { @include round-border(5px); }
.triangle { @include rotate(45deg); }
div {
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
.triangle {
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: 45deg;
}
@mixinparameters are used to simplify while using Vender Prefix Properties e.g.-ms,-moz,-o,-webkit.
Saas Arguments with Default Arguments
Default Arguments in Sass Mixin
Saas Mixins support default values with arguments if the @include ommits passing variable or constants
@mixin round-border($value:1em){
-moz-border-radius: $value;
-ms-border-radius: $value;
-o-border-radius: $value;
-webkit-border-radius: $value;
border-radius: $value;
}
div{
@include round-border;
}
In the code above, notice that while @include the round-border ommited () but the transpiler set the default value 1em to each of the vendor prefixed property.
Following is the generated CSS.
div {
-moz-border-radius: 1em;
-ms-border-radius: 1em;
-o-border-radius: 1em;
-webkit-border-radius: 1em;
border-radius: 1em;
}
When using no parameter with@mixinor@includewithout arguments,()is optional.
Sass Mixin in another Mixin
Sass may call one mixin in another mixin.
@mixin mxn-color{
color:black;
background:white;
}
@mixin mxn-font{
font-family: 'Times New Roman', Times, serif;
font-size:10pt;
}
@mixin mxn-text{
text-align: center;
text-decoration: normal;
text-transform: capitalize;
}
@mixin p-rule {
@include mxn-color;
@include mxn-font;
@include mxn-text;
}
p{
@include p-rule;
}
p {
color: black;
background: white;
font-family: "Times New Roman", Times, serif;
font-size: 10pt;
text-align: center;
text-decoration: normal;
text-transform: capitalize;
}