Mixins

Writing the same code repeatedly is a common pattern in CSS. Sass provides a feature called mixin which allows you to reuse code across your stylesheets. Typically, a mixin is written after the variable declarations and used throughout the Sass file.

Basic mixins

A mixin is defined using the @mixin directive followed by a name, and can accept parameters within round brackets. For instance, let's define a mixin called color-combo that takes two parameters: $front and $back.

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

To use a mixin, we use the @include directive followed by the mixin name and the required arguments.

$color: #cf649a;

// Mixin declaration
@mixin color-combo($front, $back) {
  color: $front;
  background-color: $back;
}

h1 {
  @include color-combo($color, inherit);
}

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

Comments in Sass

In Sass, single-line comments //... are not included in the compiled CSS, in contrast to multi-line comments /*...*/.

Sass naming conventions

Sass' naming conventions are inherited from CSS. Lowercase, hyphen-separated names, like color-combo in the example above, are considered standard.

Mixins with parameters

Mixins can have optional parameters, allowing us to define a default style that can be easily overridden. This can be achieved by assigning default values to the parameters in the mixin definition.

Example without arguments

In this case, if we include the mixin without arguments, it will use the default values.

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

@import "mixins";

body {
  @include color-combo; // Uses default colors
}

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

Example with one argument

If we include the mixin with one argument, it will be assigned to the first parameter and the second parameter will use its default value.

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

@import 'mixins';

body {
  @include color-combo(black); // Uses black for the front color and the default for the back color
}

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

Example with named parameters

We can also include parameters by their names to avoid confusion.

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

@import 'mixins';

body {
  @include color-combo($back: lightgray); // Uses default for the front color and lightgray for the back color
}

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

READING TIP

For more details, you can check the official Sass documentation on @mixin and @include (opens new window)

Interactive example

Below is an interactive example showcasing the concepts discussed above.

    
<main>
    <section id="intro">
        <h1>Sass: The Superhero of CSS Development</h1>
        <p>Welcome to Sass, the CSS preprocessor that's faster than a speeding bullet, more powerful than a locomotive, and able to compile large stylesheets in a single bound. 
            <a href="https://sass-lang.com/">Get to know Sass here</a>.
        </p>
    </section>
    <section id="superpowers">
        <h2>Superpowers of Sass</h2>
        <ul>
            <li>
                <strong>X-ray Vision (Variables):</strong> Sass has the power to see into your stylesheets and find every instance of a color, font, or size - and change it in a single move.
            </li>
            <li>
                <strong>Super Strength (Nesting):</strong> Sass can take a massive, sprawling stylesheet and fold it up into a neat little package, thanks to nesting.
            </li>
        </ul>
    </section>
    <section id="why-sass">
        <h2>Why You Need Sass on Your Team</h2>
        <p>With Sass on your side, your code will be faster, stronger, and smarter. It's a no-brainer, really.</p>
    </section>
</main>
<footer>
    <p>May your code be as smooth as a <a target="_top" href="https://www.youtube.com/watch?v=dQw4w9WgXcQ&ab_channel=RickAstley">jazz sax solo</a>.</p>
</footer>

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

@mixin color-combo($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 color-combo;
}

main, footer {
  padding: 0 1rem;
}

h1 {
  @include color-combo($sasscolor, inherit);
}

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

li {
  margin-left: 2rem;
}


footer {
  @include color-combo(white, $sasscolor);

  p {
    padding: 1rem 0;
    a {
        @include color-combo(white, inherit);
    }
  }
}


a {
  font-weight: bold;
  @include color-combo($sasscolor, inherit);

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

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