Scss mixin
Mixin lets us reuse common code in different places.
We can define styles like this:
1@mixin bordered {
2 border: 1px solid black;
3}
Or we may provide argument:
1@mixin bordered($color:black, $radius:0) {
2 border: 1px solid $color;
3 border-radius: $radius;
4}
Then we can use our mixin in different places:
1header {
2 @include bordered(blue);
3
4 width: 100%;
5}
6nav li {
7 @include bordered(white, 5px);
8}
Here is an example on how we can use the mixin to create a toggable debugging border.
1$show-debug: true;
2@mixin debug ($color:red) {
3 @if $show-debug {
4 border: 1px solid $color;
5 }
6}
In the .col and nav li:
1.col {
2 padding: 0 10px;
3 width: 100%;
4
5 @include debug;
6
7 @media screen and (min-width: $breakpoint) {
8 float:left;
9 }
10}
11nav li {
12 width: 100%;
13 padding: 5px;
14
15 @include debug(green);
16}
What’s next? We’re going to take a look at “Using loop to define grid”.
