首页 > 代码库 > [SCSS] Reuse Styles with the SCSS @mixin Directive
[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:
- we can pass default value: ‘$base-color: #a83b24‘
- we can use optional parameter: ‘$border: null‘
- 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
[SCSS] Reuse Styles with the SCSS @mixin Directive