diff --git a/sass.md b/sass.md index ed06df9b1..eb71c61d1 100644 --- a/sass.md +++ b/sass.md @@ -3,66 +3,102 @@ title: Sass category: CSS --- -### Color functions +## Color functions - rgb(r,g,b) - rgba(r,g,b,a) - rgba($color, a) +```scss +rgb(100, 120, 140) +rgba(100, 120, 140, .5) +rgba($color, .5) +``` - darken($color, 5%) - lighten($color, 5%) - saturate($color, 5%) - desaturate($color, 5%) - grayscale($color) +### Mixing - compliment($color) - $invert(color) +```scss +mix($a, $b, 10%) /* 10% a, 90% b */ +``` - mix($a, $b, 50%) +### Modifying HSLA - hue($color) - saturation($color) - lightness($color) - alpha($color) /* aka opacity() */ +```scss +darken($color, 5%) +lighten($color, 5%) +``` - fade-in($color, 0.5) - fade-out($color, 0.5) +``` +saturate($color, 5%) +desaturate($color, 5%) +grayscale($color) +``` - 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) +```scss +adjust-hue($color, 15deg) +compliment($color) /* like adjust-hue(_, 180deg) */ +invert($color) +``` -http://sass-lang.com/documentation/Sass/Script/Functions.html +```scss +fade-in($color, .5) +fade-out($color, .5) /* halves the opacity */ +rgba($color, .5) /* sets alpha to .5 */ +``` -### Functions +### Getting HSL values - unquote('hello') - quote(hello) - unit(3em) => 'em' - unitless(100px) => false +```scss +hue($color) +saturation($color) +lightness($color) +alpha($color) /* aka opacity() */ +``` -### Loops +### Full adjustments - $i: 6; - @while $i > 0 { - .item-#{$i} { width: 2em * $i; } - $i: $i - 2; - } +```scss +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 + +```scss +unquote('hello') +quote(hello) +unit(3em) /* 'em' */ +unitless(100px) /* false */ +``` + +## Loops + +```scss +$i: 6; +@while $i > 0 { + .item-#{$i} { width: 2em * $i; } + $i: $i - 2; +} +``` ## Interpolation - .#{$lol} { ... } +```scss +$klass: 'button' + +.#{$klass} { ... } /* same as `.button` */ +``` ## Lists - $list: (a b c); +```scss +$list: (a b c); - nth($list, 1) // starts with 1 - length($list) +nth($list, 1) /* starts with 1 */ +length($list) - @each $item in $list { ... } +@each $item in $list { ... } +``` ## Reference