This commit is contained in:
Rico Sta. Cruz 2016-02-16 11:32:26 +08:00
parent b82177fed2
commit 85ffe9142a
1 changed files with 76 additions and 40 deletions

76
sass.md
View File

@ -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)
```
### Mixing
```scss
mix($a, $b, 10%) /* 10% a, 90% b */
```
### Modifying HSLA
```scss
darken($color, 5%)
lighten($color, 5%)
```
```
saturate($color, 5%)
desaturate($color, 5%)
grayscale($color)
```
compliment($color)
$invert(color)
```scss
adjust-hue($color, 15deg)
compliment($color) /* like adjust-hue(_, 180deg) */
invert($color)
```
mix($a, $b, 50%)
```scss
fade-in($color, .5)
fade-out($color, .5) /* halves the opacity */
rgba($color, .5) /* sets alpha to .5 */
```
### Getting HSL values
```scss
hue($color)
saturation($color)
lightness($color)
alpha($color) /* aka opacity() */
```
fade-in($color, 0.5)
fade-out($color, 0.5)
### Full adjustments
```scss
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)
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) */
```
http://sass-lang.com/documentation/Sass/Script/Functions.html
## Other functions
### Functions
### Strings and units
```scss
unquote('hello')
quote(hello)
unit(3em) => 'em'
unitless(100px) => false
unit(3em) /* 'em' */
unitless(100px) /* false */
```
### Loops
## 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
```scss
$list: (a b c);
nth($list, 1) // starts with 1
nth($list, 1) /* starts with 1 */
length($list)
@each $item in $list { ... }
```
## Reference