From 1826ef662555b7d8dd110dfd5f6324bb57dca3ed Mon Sep 17 00:00:00 2001 From: "Rico Sta. Cruz" Date: Tue, 16 Feb 2016 11:53:20 +0800 Subject: [PATCH] Update --- sass.md | 73 ++++++++++++++++++++++++++++++++++++++++++++++++++++++--- 1 file changed, 70 insertions(+), 3 deletions(-) diff --git a/sass.md b/sass.md index 4b6f47c2d..fe0144536 100644 --- a/sass.md +++ b/sass.md @@ -31,8 +31,8 @@ adjust-hue($color, 15deg) compliment($color) /* like adjust-hue(_, 180deg) */ invert($color) -fade-in($color, .5) -fade-out($color, .5) /* halves the opacity */ +fade-in($color, .5) /* aka opacify() */ +fade-out($color, .5) /* aka transparentize() - halves the opacity */ rgba($color, .5) /* sets alpha to .5 */ ``` @@ -48,23 +48,90 @@ alpha($color) /* aka opacity() */ ### Full adjustments ```scss +/* Changes by fixed amounts */ 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) */ + +/* Changes via percentage */ +scale-color($color, $lightness: 50%) + +/* Changes one property completely */ +change-color($color, $hue: 180deg) +change-color($color, $blue: 250) + +/* Supported: $red $green $blue $hue $saturation $lightness $alpha */ ``` ## Other functions -### Strings and units +### Strings ```scss unquote('hello') quote(hello) + +to-upper-case(hello) +to-lower-case(hello) + +str-length(hello world) +str-slice(hello, 2, 5) /* "ello" - it's 1-based, not 0-based */ +str-insert("abcd", "X", 1) /* "Xabcd" */ +``` + +### Units + +```scss unit(3em) /* 'em' */ unitless(100px) /* false */ ``` +### Numbers + +```scss +floor(3.5) +ceil(3.5) +round(3.5) +abs(3.5) + +min(1, 2, 3) +max(1, 2, 3) + +percentage(.5) /* 50% */ +random(3) /* 0..3 */ +``` + +### Misc + +```scss +variable-exists(red) /* checks for $red */ +mixin-exists(red-text) /* checks for @mixin red-text */ +function-exists(redify) + +global-variable-exists(red) +``` + +```scss +selector-append('.menu', 'li', 'a') /* .menu li a */ +selector-nest('.menu', '&:hover li') /* .menu:hover li */ +selector-extend(...) +selector-parse(...) +selector-replace(...) +selector-unify(...) +``` + +## Feature checks + +```scss +feature-exists(global-variable-shadowing) +``` + +* global-variable-shadowing +* extend-selector-pseudoclass +* units-level-3 +* at-error + ## Loops ### For loops