Mixins
This allows us to reuse our codes multiple time as we wish.
Syntax
@mixin any-name {
background-color: red;
border-color: green;
}
How to use it.
To use any mixin, you have to use the keyword @include followed by the mixin name
h1 {
color: yellow;
@include any-name;
}
mixin with arguements
Mixins can be used along side arguements. For instance
@mixin margin-padding-border($margin, $padding, $border) {
margin: $margin;
padding: $padding;
border: $border;
}
($margin, $padding, $border) are the arguements passed when ever this mixin (margin-padding-border) is called. And to use them, you have to make use of the @include keyword followed by the arguement parameters
body {
@include margin-padding-border(0, 0, 0);
}
or
body {
@include width-height($width: 0, $height: 100%, $margin: 5%);
}
In this case, both will output the same result.
Importance of mixin
- It makes your code short and reuseable
- Allows your code look clean and easy to read