Remove duplicate section about mixins (#337)

This commit is contained in:
​Faizaan 2019-05-04 01:30:10 +05:30 committed by Natalie Weizenbaum
parent 6729c6fb54
commit a41d9df7ef

View File

@ -400,38 +400,4 @@ introduction: >
let us do something like take pixel values and convert them to percentages
without much hassle.
## Mixins
Some things in CSS are a bit tedious to write, especially with CSS3 and
the many vendor prefixes that exist. A mixin lets you make groups of CSS
declarations that you want to reuse throughout your site. You can even
pass in values to make your mixin more flexible. A good use of a mixin is
for vendor prefixes. Here's an example for <code>transform</code>.
- example do
:plain
@mixin transform($property) {
-webkit-transform: $property;
-ms-transform: $property;
transform: $property;
}
.box { @include transform(rotate(30deg)); }
===
=transform($property)
-webkit-transform: $property
-ms-transform: $property
transform: $property
.box
+transform(rotate(30deg))
:markdown
To create a mixin you use the <code>@mixin</code> directive and give it a
name. We've named our mixin <code>transform</code>. We're also using
the variable <code>$property</code> inside the parentheses so we can pass in
a transform of whatever we want. After you create your mixin, you can then
use it as a CSS declaration starting with <code>@include</code> followed
by the name of the mixin.
---