[SCSS] Reuse Styles with the SCSS @mixin Directive

Copy/pasting the same code is redundant and updating copy/pasted code slows development velocity. Mixins are reusable chunks of code that are included, similar to calling a function, instead of copy/pasted.

Mixins have some nice features:
- Arguments just like functions.
- Arguments can have default values and optional values.
- Named arguments allow us to use optional and default arguments when the mixin is included.
- Variable arguments allow us to have a dynamic number of arguments when the mixin is included.
- The @content directive allow us to add additional styles when the mixin is included.

In this lesson we learn how to DRY up the code with the SCSS @mixin directive and make copy/paste a thing of the past.

Define a mixin:

@mixin make-character($base-color: #a83b24, $mix-color: #fffaa6, $border: null) {

Here as you can see, we use named parameters. The benifits when we use named parameters is:

1. we can pass default value: '$base-color: #a83b24'
2. we can use optional parameter: '$border: null'
3. when we use mixin, the parameters order doesn't matter

@include make-character($border: 5px solid brown, $mix-color: pink)

If you don't know how many paramter the mixin will take, you can do:

@mixin make-transitions($transitions...) { transition: $transitions; }

It can take as many as paramters you pass in:

@include make-transitions(margin 1s, border-radius 1s, border 1s, transform 1s);

@content directive

@content directive refers to whatever you pass in when you using mixin:

.wolverine {
  @include make-character($border: 5px solid brown, $mix-color: pink) {
    @include make-transitions(margin 1s, border-radius 1s, border 1s, transform 1s);

    &:hover {
      margin-top: 5rem;
      border-radius: 50%;
      border: 10px solid green;
      transform: rotate3d(10, 0, 0, 360deg);
    }
  };
}

So now, @content referts to all the highlighted part.

@mixin make-character($base-color: #a83b24, $mix-color: #fffaa6, $border: null) {
  $light-color: lighten($base-color, 20%);
  $dark-color: darken($base-color, 35%);
  $cbc: complement($base-color);
  $clc: complement($light-color);
  $cdc: complement($dark-color);

  background-image: linear-gradient($light-color, $base-color, $dark-color);
  border: $border;

  &:hover { background-image: linear-gradient($clc, $cbc, $cdc); }
  &:hover &-text { color: transparentize(mix($base-color, $mix-color, 25%), .2); }

  &-text {
    color: mix($base-color, $mix-color, 75%);
  }

  img { @content; }
}

In this context, 'img' will get all the highlighted styles.

---

.character {
  text-align: center;
  width: 15rem;
  display: inline-block;
  margin: 0.5rem;

  p {
    font-size: 1.5rem;
    padding-bottom: 0.5rem;
  }

  img {
    margin-top: 1rem;
    border-radius: 25%;
  }
}

@mixin make-transitions($transitions...) { transition: $transitions; }

@mixin make-character($base-color: #a83b24, $mix-color: #fffaa6, $border: null) {
  $light-color: lighten($base-color, 20%);
  $dark-color: darken($base-color, 35%);
  $cbc: complement($base-color);
  $clc: complement($light-color);
  $cdc: complement($dark-color);

  background-image: linear-gradient($light-color, $base-color, $dark-color);
  border: $border;

  &:hover { background-image: linear-gradient($clc, $cbc, $cdc); }
  &:hover &-text { color: transparentize(mix($base-color, $mix-color, 25%), .2); }

  &-text {
    color: mix($base-color, $mix-color, 75%);
  }

  img { @content; }
}

@mixin media($min-width) {
  @media screen and (min-width: $min-width) { @content; }
}

.wolverine {
  @include make-character($border: 5px solid brown, $mix-color: pink) {
    @include make-transitions(margin 1s, border-radius 1s, border 1s, transform 1s);

    &:hover {
      margin-top: 5rem;
      border-radius: 50%;
      border: 10px solid green;
      transform: rotate3d(10, 0, 0, 360deg);
    }
  };
}

.rogue { @include make-character(#0ab36d, #FFFE8A, 5px solid green); }
.firestar { @include make-character(#DB233B, #e3fd00); }

.nightcrawler {
  @include make-character(#1d6098, #ffcef9) {
    @include media(800px) { content: url("../images/bamf.jpg"); }
  };
}

Github