# Mixins

Have you ever paid attention to how often you write about the same code (e.g. assigning a foreground and background color) in a project?
Emmet does help you, but still it can be done even faster in Sass by using a mixin which allows you to reuse code (you write once) in many places.
A mixin should logically be written before you start using it, and is usually written right after the (declarations of the) variables
- You start with @mixin followed by a well-chosen name (e.g. colorcombo) for the code you want to reuse
- Between round brackets you describe the parameters (e.g. $front and $back) you want to work with
  - $front ends up in the color property
  - $back is the value that background-color should take
In order to use a mixin, you start by writing @include, followed by the name (e.g. colorcombo) and the arguments that you want to use (e.g. 2 colors in a format of your choice: as a variable, as the result of a Sass color function, hexadecimal, color name, rgb(), rgba(), ...)

@use "sass:color";

$sasscolor: #cf649a;

@mixin colorcombo($front, $back) {
  color: $front;
  background-color: $back;
}

h1 {
  //color: $sasscolor;
  //background-color: inherit;
  @include colorcombo($sasscolor, inherit);
}

a {
  //color: color.scale($sasscolor, $lightness:-50%);
  //background-color: inherit;
  @include colorcombo(color.scale($sasscolor, $lightness: -50%), inherit);
}

 
        Copied!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

REMARK: Comments in Sass

In the Sass code above, we used some single-line comments //... (CTRL+/) to compare the @include statements with the original code. These // comments are not included in the compiled CSS, in contrast to (multi-line) comments /*...*/ (CTRL+SHIFT +/).
See also: Sass documentation: Comments (opens new window)

# More on parameters

The parameters of a mixin are optional. For example, you could write a mixin darkonlight without parameters to use a (fixed) blackish color on a (fixed) whitish background.

@mixin darkonlight {
  color: #151515;
  background-color: #f1f1f1;
}

body {
  @include darkonlight;
}
 
        Copied!

1
2
3
4
5
6
7
8

You also can include default values for the parameters of a mixin (by adding these default values after the parameters, preceded by a colon)

If the mixin is included without arguments, the default values are used

@mixin colorcombo($front: #151515, $back: #f1f1f1) {
  color: $front;
  background-color: $back;
}

body {
  //color = default (#151515), background-color = default (#f1f1f1)
  @include colorcombo; 
}
 
        Copied!

1
2
3
4
5
6
7
8
9

If only one argument is supplied with the @include statement, it is used for the first parameter. For the second parameter the default value is used.

@mixin colorcombo($front: #151515, $back: #f1f1f1) {
  color: $front;
  background-color: $back;
}

body {
  //color = black, background-color = default (#f1f1f1)
  @include colorcombo(black);
}
 
        Copied!

1
2
3
4
5
6
7
8
9

To avoid confusion (when not specifying all arguments), the parameter names may be included in the @include statement

@mixin colorcombo($front: #151515, $back: #f1f1f1) {
  color: $front;
  background-color: $back;
}

body {
  //color = default (#151515), background-color = lightgray
  @include colorcombo($back: lightgray);
}
 
        Copied!

1
2
3
4
5
6
7
8
9

READING TIP

Sass documentation: @mixin and @include (opens new window)

# Mixins

# More on parameters

# Example 1D