[SCSS] Reuse Styles with the SCSS @mixin Directive

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

Mixins has 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 has a dynamic number of arguments when the mixin is included.
-the @content directive allow us to add additional styles if the mixin is included.

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

Define a mixin:

@mixin Make-character ($basenull) {

Here as your can see, we use named parameters. The benifits when we use named parameters are:

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 would take, you can do:

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

It can take as many as paramters-pass in:

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

@content directive

@content directive refers to whatever if you are using mixin:

. Wolverine {  @includemake-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;      border:10px solid Green;      Transform:rotate3d (00, 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, -%); $dark-color:darken ($Base-color, *%); $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, -%), .2); }  &-Text {color:mix ($Base-color, $mix-color, the%); } img { @content; } }

In this context, ' img ' 'll 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 (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

[SCSS] Reuse Styles with the SCSS @mixin Directive