2.2 KiB
2.2 KiB
| title | category |
|---|---|
| Sass | CSS |
Color functions
rgb(100, 120, 140)
rgba(100, 120, 140, .5)
rgba($color, .5)
Mixing
mix($a, $b, 10%) /* 10% a, 90% b */
Modifying HSLA
darken($color, 5%)
lighten($color, 5%)
saturate($color, 5%)
desaturate($color, 5%)
grayscale($color)
adjust-hue($color, 15deg)
compliment($color) /* like adjust-hue(_, 180deg) */
invert($color)
fade-in($color, .5)
fade-out($color, .5) /* halves the opacity */
rgba($color, .5) /* sets alpha to .5 */
Getting HSL values
hue($color)
saturation($color)
lightness($color)
alpha($color) /* aka opacity() */
Full adjustments
adjust-color($color, $blue: 5)
adjust-color($color, $lightness: -30%) /* like darken(_, 30%) */
adjust-color($color, $alpha: -0.4) /* like fade-out(_, .4) */
adjust-color($color, $hue: 30deg) /* like adjust-hue(_, 15deg) */
Other functions
Strings and units
unquote('hello')
quote(hello)
unit(3em) /* 'em' */
unitless(100px) /* false */
Loops
For loops
@for $i from 1 through 4 {
.item-#{$i} { left: 20px * $i; }
}
Each loops (simple)
$menu-items: home about services contact;
@each $item in $menu-items {
.photo-#{$item} {
background: url('images/#{$item}.jpg');
}
}
Each loops (nested)
$backgrounds: (home, 'home.jpg'), (about, 'about.jpg');
@each $id, $image in $backgrounds {
.photo-#{$id} {
background: url($image);
}
}
While loops
$i: 6;
@while $i > 0 {
.item-#{$i} { width: 2em * $i; }
$i: $i - 2;
}
Conditionals
@if $position == 'left' {
position: absolute;
left: 0;
}
@else {
position: static;
}
Interpolation
$klass: 'button'
.#{$klass} { ... } /* same as `.button` */
Lists
$list: (a b c);
nth($list, 1) /* starts with 1 */
length($list)
@each $item in $list { ... }
Maps
$map: (key1: value1, key2: value2, key3: value3);
map-get($map, key1)