style.scss
@import "mixins";
@include small-box(red);
@include small-box(pink);
@include small-box(yellow);
@include small-box(black);
_mixins.scss
@mixin small-box($color){
.small-box-#{$color} -->#{} is interpolation
{
width: 50px;
height:50px;
border: 1px solid black;
color: $color;
}
}
Output:
.small-box-red {
width: 50px;
height: 50px;
border: 1px solid black;
color: red;
}
.small-box-pink {
width: 50px;
height: 50px;
border: 1px solid black;
color: pink;
}
.small-box-yellow {
width: 50px;
height: 50px;
border: 1px solid black;
color: yellow;
}
.small-box-black {
width: 50px;
height: 50px;
border: 1px solid black;
color: black;
}
To make it better;
style.scss
@import "mixins";
@include small-box(red);
@include small-box(pink);
@include small-box(yellow);
@include small-box(black);
_mixins.scss
@mixin small-box($color){
.small-box-#{$color} -->#{} is interpolation
{
@extend %small-box;
color: $color;
}
}
_placeholder.scss
%small-box{
width: 50px;
height:50px;
border: 1px solid black;
}
Output:
.small-box-black, .small-box-yellow, .small-box-pink, .small-box-red {
width: 50px;
height: 50px;
border: 1px solid black;
}
.small-box-red {
color: red;
}
.small-box-pink {
color: pink;
}
.small-box-yellow {
color: yellow;
}
.small-box-black {
color: black;
}