16.6    Mixins (“@mixin”, “@include”)

Besides variables, mixins represent the most commonly used feature of Sass. Mixins are entire blocks of CSS features you can reuse as a whole at any time. Creating and using them is just as easy. To define a mixin, you want to follow these steps:

@mixin mixin-name {
   ...
}

As usual, you need to write your CSS features between curly brackets. Then, you can use @include to access this code block at any time:

@include mixin-name;

For this purpose, we’ll use our previous example from this chapter with mixins (see Table 16.6).

SCSS File

CSS File

...
@mixin article-style {
  background-color: $color-primary;
  color: $color-primary-font;
  padding: 0.1em;
  margin-bottom: $spacing-std;
  border-radius: 5px;
}

...
.my-article {
  width: 35rem;
  background-color: #5f5f5f;
  color: #fff;
  padding: 0.1em;
  margin-bottom: 1em;
  border-radius: 5px;
}

@mixin article-content {
  background-color: $color-secondary;
  color: $color-secondary-font;
  padding: 2em;
}
...
.my-article {
  width: 35rem;
@include article-style;
  h1 {
  padding-left: 0.5em;
  }
  p {
@include article-content;
  }
}

.my-article h1 {
  padding-left: 0.5em;
}

.my-article p {
  background-color: #fff;
  color: #000;
  padding: 2em;
}

SCSS file: /examples/chapter016/16_6/style/style.scss

CSS file: /examples/chapter016/16_6/style/style.css

Table 16.6     The SCSS File and the CSS File after the Preprocessor Run

Those mixins are perfect for entire blocks of code that you use over and over again. As you can see in the example, the mixins also work with the variables of Sass. In the context of the variables, the desire quickly arises to make the mixins themselves a bit more flexible, for example, to use a mixin code block with different color combinations or other different values such as the text size. This isn’t a problem with mixins because you can use them with arguments. Such arguments must be written inside parentheses with variables. An example will demonstrate the mixins with arguments (see Table 16.7).

In the example, you can see that you can pass values for the arguments as Sass variables or also with valid CSS values. The HTML file /examples/chapter016/16_6/index2. html has been adapted in the corresponding position as follows:

...
    <article class="my-article">
        <h1>Article 1</h1>
        <p class="p1">Lorem ipsum ... </p>
    </article>
    <article class="my-article">
        <h1>Article 2</h1>
        <p class="p2">Lorem ipsum ... </p>
    </article>
...

Listing 16.3     /examples/chapter016/16_6/index2.html

SCSS File

CSS File

...
@mixin article-content(
  $bg-color, $txt-color, $spacing) {
  background-color: $bg-color;
  color: $txt-color;
  padding: $spacing;
}
...
.my-article {
...
  .p1 {
  @include article-content(
  $color-secondary,
  $color-secondary-font,
  $spacing-std);
    }
  .p2 {
  @include article-content(
  yellow,
  $color-secondary-font,
  0.5em);
  }
}

...
.my-article .p1 {
  background-color: #fff;
  color: #000;
  padding: 1em;
}

.my-article .p2 {
  background-color: yellow;
  color: #000;
  padding: 0.5em;
}

SCSS file: /examples/chapter016/16_6/style/style2.scss

CSS file: /examples/chapter016/16_6/style/style2.css

Table 16.7     The SCSS File and the CSS File after the Preprocessor Run

What’s missing now are mixins with default values for the arguments to still be able to call and use the mixin without special values. You can do this by writing the default value after the variable separated by a colon:

...
@mixin article-content($bg-color:$color-secondary,
                       $txt-color:$color-secondary-font,
                       $spacing:$spacing-std) {
    background-color: $bg-color;
    color: $txt-color;
    padding: $spacing;
}
...
.my-article {
...
    .p1 {
        @include article-content;
    }
    .p2 {
        @include article-content(yellow, $color-secondary-font, 0.5em);
    }
}

Listing 16.4     /examples/chapter016/16_6/style/style3.scss

In the example, I’ve used Sass variables as default values, which I can then adjust as needed. You can also just use a valid CSS value here. Now you can use the mixin with arguments and default values with and without values. If you don’t set any values, the default values will be used. Here it’s also possible that you call the mixin with one or two values. In that case, the default value will be used for the second and/or third value. For example, the following is also possible thanks to the default values:

@include article-content(green);
@include article-content(blue, yellow);