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”.

◀ Scss variable Using loop to define grid ▶

makzan.

Scss mixin

Makzan | Mobile web design | Table of Content