59 lines
964 B
Markdown
59 lines
964 B
Markdown
---
|
|
title: Sass
|
|
layout: default
|
|
---
|
|
|
|
### Color functions
|
|
|
|
rgb(r,g,b)
|
|
rgba(r,g,b,a)
|
|
rgba($color, a)
|
|
|
|
darken($color, 5%)
|
|
lighten($color, 5%)
|
|
saturate($color, 5%)
|
|
desaturate($color, 5%)
|
|
grayscale($color)
|
|
|
|
compliment($color)
|
|
$invert(color)
|
|
|
|
mix($a, $b, 50%)
|
|
|
|
hue($color)
|
|
saturation($color)
|
|
lightness($color)
|
|
alpha($color) /* aka opacity() */
|
|
|
|
fade-in($color, 0.5)
|
|
fade-out($color, 0.5)
|
|
|
|
adjust-color($color, $blue: 5)
|
|
adjust-color($color, $lightness: -30%)
|
|
adjust-color($color, $alpha: -0.4)
|
|
adjust-color($color, $hue: 30deg)
|
|
adjust-hue($color, 15deg)
|
|
|
|
http://sass-lang.com/documentation/Sass/Script/Functions.html
|
|
|
|
### Loops
|
|
|
|
$i: 6;
|
|
@while $i > 0 {
|
|
.item-#{$i} { width: 2em * $i; }
|
|
$i: $i - 2;
|
|
}
|
|
|
|
## Interpolation
|
|
|
|
.#{$lol} { ... }
|
|
|
|
## Lists
|
|
|
|
$list: (a b c);
|
|
|
|
nth($list, 1) // starts with 1
|
|
length($list)
|
|
|
|
@each $item in $list { ... }
|