标签：ted ansi default can out for pass ima pad
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:
@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"); } }; }
[SCSS] Reuse Styles with the SCSS @mixin Directive
标签：ted ansi default can out for pass ima pad
原文地址：http://www.cnblogs.com/Answer1215/p/6760028.html
