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);
}

h1 {
  color: #cf649a;
  background-color: inherit;
}

a {
  color: #75244d;
  background-color: inherit;
}

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;
}

body {
  color: #151515;
  background-color: #f1f1f1;
}

• 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; 
    }
    

    body {
      color: #151515;
      background-color: #f1f1f1;
    }
    

  • 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);
    }
    

    body {
      color: black;
      background-color: #f1f1f1;
    }
    

  • 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);
    }
    

    body {
      color: #151515;
      background-color: lightgray;
    }
    

READING TIP

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

Example 1D

    
<main>
    <h1>Sass</h1>
    <p><a href="https://sass-lang.com/">Sass</a> (short for Syntactically Awesome Style Sheets) is a preprocessor scripting language that is interpreted or
        compiled into Cascading Style Sheets (CSS).</p>
    <p>Sass exists in 2 syntax variants:</p>
    <ul>
        <li>The original syntax, called "the indented syntax," uses indentation to separate
            code blocks and newline characters to separate rules.
        </li>
        <li>The newer syntax, "SCSS" (Sassy CSS), uses block
            formatting like that of CSS. It uses braces to denote code blocks and semicolons to separate rules within a
            block.
        </li>
    </ul>
    <p>The indented syntax and SCSS files are traditionally given the extensions .sass and .scss, respectively.</p>
</main>
<footer>
    <p>Based on the information found on <a
            href="https://en.wikipedia.org/wiki/Sass_(stylesheet_language)">Wikipedia</a>, The Free Encyclopedia.
        Retrieved January 19, 2021.
    </p>
</footer>

    
@use "sass:color";

$sasscolor: #cf649a;
$fontstack: Verdana, sans-serif;
$fontsize: 14px;

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

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: $fontsize;
}

body {
  font-family: $fontstack;
  line-height: 1.5;
  @include colorcombo; //color = default (#151515), background-color = default (#f1f1f1)
  //@include colorcombo(black); //color = black, background-color = default (#f1f1f1)
  //@include colorcombo($back:lightgray); //color = default (#151515), background-color = lightgray
}

main, footer {
  padding: 0 1rem;
}

h1 {
  @include colorcombo($sasscolor, inherit);
}

h1, p, ul {
  margin-bottom: 1rem;
}

li {
  margin-left: 2rem;
}


footer {
  @include colorcombo(inherit, color.scale(color.invert($sasscolor), $lightness:75%));

  p {
    padding: 1rem 0;
  }
}


a {
  font-weight: bold;
  text-decoration: none;
  @include colorcombo(color.scale($sasscolor, $lightness:-50%), inherit);

  &:focus {
    outline: 2px solid $sasscolor;
  }

  &:hover {
    text-decoration: underline;
  }
}