Update
This commit is contained in:
parent
85ffe9142a
commit
5f566e452c
58
sass.md
58
sass.md
|
@ -22,21 +22,15 @@ mix($a, $b, 10%) /* 10% a, 90% b */
|
|||
```scss
|
||||
darken($color, 5%)
|
||||
lighten($color, 5%)
|
||||
```
|
||||
|
||||
```
|
||||
saturate($color, 5%)
|
||||
desaturate($color, 5%)
|
||||
grayscale($color)
|
||||
```
|
||||
|
||||
```scss
|
||||
adjust-hue($color, 15deg)
|
||||
compliment($color) /* like adjust-hue(_, 180deg) */
|
||||
invert($color)
|
||||
```
|
||||
|
||||
```scss
|
||||
fade-in($color, .5)
|
||||
fade-out($color, .5) /* halves the opacity */
|
||||
rgba($color, .5) /* sets alpha to .5 */
|
||||
|
@ -73,6 +67,39 @@ unitless(100px) /* false */
|
|||
|
||||
## Loops
|
||||
|
||||
### For loops
|
||||
|
||||
```scss
|
||||
@for $i from 1 through 4 {
|
||||
.item-#{$i} { left: 20px * $i; }
|
||||
}
|
||||
```
|
||||
|
||||
### Each loops (simple)
|
||||
|
||||
```scss
|
||||
$menu-items: home about services contact;
|
||||
|
||||
@each $item in $menu-items {
|
||||
.photo-#{$item} {
|
||||
background: url('images/#{$item}.jpg');
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Each loops (nested)
|
||||
```scss
|
||||
$backgrounds: (home, 'home.jpg'), (about, 'about.jpg');
|
||||
|
||||
@each $id, $image in $backgrounds {
|
||||
.photo-#{$id} {
|
||||
background: url($image);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### While loops
|
||||
|
||||
```scss
|
||||
$i: 6;
|
||||
@while $i > 0 {
|
||||
|
@ -81,6 +108,16 @@ $i: 6;
|
|||
}
|
||||
```
|
||||
|
||||
## Conditionals
|
||||
|
||||
```scss
|
||||
@if $position == 'left' {
|
||||
left: 0;
|
||||
}
|
||||
@else $position == 'top' {
|
||||
}
|
||||
```
|
||||
|
||||
## Interpolation
|
||||
|
||||
```scss
|
||||
|
@ -100,6 +137,15 @@ length($list)
|
|||
@each $item in $list { ... }
|
||||
```
|
||||
|
||||
## Maps
|
||||
|
||||
```scss
|
||||
$map: (key1: value1, key2: value2, key3: value3);
|
||||
|
||||
map-get($map, key1)
|
||||
```
|
||||
|
||||
## Reference
|
||||
|
||||
- <http://sass-lang.com/documentation/Sass/Script/Functions.html>
|
||||
- <http://sass-lang.com/documentation/file.SASS_REFERENCE.html#sassscript>
|
||||
|
|
Loading…
Reference in New Issue