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) */
|
||||
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
|
||||
|
|
Loading…
Reference in New Issue