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