mirror of
https://github.com/danog/sass-site.git
synced 2025-01-22 05:41:42 +01:00
Update @mixin prefixe property (#176)
* Update _homepage-mixins-css.md * Update _homepage-mixins-sass.md * Update _homepage-mixins-scss.md * Update guide.html.haml Changing #topic-6 : property border-radius to transform because prefixe border-radius is outdated * Update _homepage-mixins-sass.md * Update _homepage-mixins-scss.md * Update guide.html.haml * Update guide.html.haml Short line 150 * Update _homepage-mixins-scss.md * Update guide.html.haml
This commit is contained in:
parent
61fb106f7a
commit
e6cf9a748d
@ -1,8 +1,7 @@
|
||||
```css
|
||||
.box {
|
||||
-webkit-border-radius: 10px;
|
||||
-moz-border-radius: 10px;
|
||||
-ms-border-radius: 10px;
|
||||
border-radius: 10px;
|
||||
-webkit-transform: rotate(30deg);
|
||||
-ms-transform: rotate(30deg);
|
||||
transform: rotate(30deg);
|
||||
}
|
||||
```
|
||||
|
@ -1,10 +1,9 @@
|
||||
```sass
|
||||
=border-radius($radius)
|
||||
-webkit-border-radius: $radius
|
||||
-moz-border-radius: $radius
|
||||
-ms-border-radius: $radius
|
||||
border-radius: $radius
|
||||
=transform($property)
|
||||
-webkit-transform: $property
|
||||
-ms-transform: $property
|
||||
transform: $property
|
||||
|
||||
.box
|
||||
+border-radius(10px)
|
||||
+transform(rotate(30deg))
|
||||
```
|
||||
|
@ -1,10 +1,9 @@
|
||||
```scss
|
||||
@mixin border-radius($radius) {
|
||||
-webkit-border-radius: $radius;
|
||||
-moz-border-radius: $radius;
|
||||
-ms-border-radius: $radius;
|
||||
border-radius: $radius;
|
||||
@mixin transform($property) {
|
||||
-webkit-transform: $property;
|
||||
-ms-transform: $property;
|
||||
transform: $property;
|
||||
}
|
||||
|
||||
.box { @include border-radius(10px); }
|
||||
.box { @include transform(rotate(30deg)); }
|
||||
```
|
||||
|
@ -209,9 +209,9 @@ title: Sass Basics
|
||||
|
||||
:markdown
|
||||
To create a mixin you use the <code>@mixin</code> directive and give it a
|
||||
name. We've named our mixin <code>border-radius</code>. We're also using
|
||||
the variable <code>$radius</code> inside the parentheses so we can pass in
|
||||
a radius of whatever we want. After you create your mixin, you can then
|
||||
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. When your CSS is generated it'll look like this:
|
||||
|
||||
|
Loading…
x
Reference in New Issue
Block a user