Update
This commit is contained in:
parent
35a3944ca7
commit
1826ef6625
73
sass.md
73
sass.md
|
@ -31,8 +31,8 @@ adjust-hue($color, 15deg)
|
||||||
compliment($color) /* like adjust-hue(_, 180deg) */
|
compliment($color) /* like adjust-hue(_, 180deg) */
|
||||||
invert($color)
|
invert($color)
|
||||||
|
|
||||||
fade-in($color, .5)
|
fade-in($color, .5) /* aka opacify() */
|
||||||
fade-out($color, .5) /* halves the opacity */
|
fade-out($color, .5) /* aka transparentize() - halves the opacity */
|
||||||
rgba($color, .5) /* sets alpha to .5 */
|
rgba($color, .5) /* sets alpha to .5 */
|
||||||
```
|
```
|
||||||
|
|
||||||
|
@ -48,23 +48,90 @@ alpha($color) /* aka opacity() */
|
||||||
### Full adjustments
|
### Full adjustments
|
||||||
|
|
||||||
```scss
|
```scss
|
||||||
|
/* Changes by fixed amounts */
|
||||||
adjust-color($color, $blue: 5)
|
adjust-color($color, $blue: 5)
|
||||||
adjust-color($color, $lightness: -30%) /* like darken(_, 30%) */
|
adjust-color($color, $lightness: -30%) /* like darken(_, 30%) */
|
||||||
adjust-color($color, $alpha: -0.4) /* like fade-out(_, .4) */
|
adjust-color($color, $alpha: -0.4) /* like fade-out(_, .4) */
|
||||||
adjust-color($color, $hue: 30deg) /* like adjust-hue(_, 15deg) */
|
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
|
## Other functions
|
||||||
|
|
||||||
### Strings and units
|
### Strings
|
||||||
|
|
||||||
```scss
|
```scss
|
||||||
unquote('hello')
|
unquote('hello')
|
||||||
quote(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' */
|
unit(3em) /* 'em' */
|
||||||
unitless(100px) /* false */
|
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
|
## Loops
|
||||||
|
|
||||||
### For loops
|
### For loops
|
||||||
|
|
Loading…
Reference in New Issue