224 lines
3.5 KiB
Markdown
224 lines
3.5 KiB
Markdown
---
|
|
title: Sass
|
|
category: CSS
|
|
---
|
|
|
|
## Color functions
|
|
|
|
```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)
|
|
|
|
adjust-hue($color, 15deg)
|
|
compliment($color) /* like adjust-hue(_, 180deg) */
|
|
invert($color)
|
|
|
|
fade-in($color, .5) /* aka opacify() */
|
|
fade-out($color, .5) /* aka transparentize() - halves the opacity */
|
|
rgba($color, .5) /* sets alpha to .5 */
|
|
```
|
|
|
|
### Getting HSL values
|
|
|
|
```scss
|
|
hue($color)
|
|
saturation($color)
|
|
lightness($color)
|
|
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
|
|
|
|
```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
|
|
|
|
```scss
|
|
@for $i from 1 through 4 {
|
|
.item-#{$i} { left: 20px * $i; }
|
|
}
|
|
```
|
|
|
|
### Each loops (simple)
|
|
|
|
```scss
|
|
$menu-items: home about services contact;
|
|
|
|
@each $item in $menu-items {
|
|
.photo-#{$item} {
|
|
background: url('images/#{$item}.jpg');
|
|
}
|
|
}
|
|
```
|
|
|
|
### Each loops (nested)
|
|
```scss
|
|
$backgrounds: (home, 'home.jpg'), (about, 'about.jpg');
|
|
|
|
@each $id, $image in $backgrounds {
|
|
.photo-#{$id} {
|
|
background: url($image);
|
|
}
|
|
}
|
|
```
|
|
|
|
### While loops
|
|
|
|
```scss
|
|
$i: 6;
|
|
@while $i > 0 {
|
|
.item-#{$i} { width: 2em * $i; }
|
|
$i: $i - 2;
|
|
}
|
|
```
|
|
|
|
## Conditionals
|
|
|
|
```scss
|
|
@if $position == 'left' {
|
|
position: absolute;
|
|
left: 0;
|
|
}
|
|
@else {
|
|
position: static;
|
|
}
|
|
```
|
|
|
|
## Interpolation
|
|
|
|
```scss
|
|
.#{$klass} { ... } /* Class */
|
|
call($function-name) /* Functions */
|
|
|
|
@media #{$tablet}
|
|
font: #{$size}/#{$line-height}
|
|
url("#{$background}.jpg")
|
|
```
|
|
|
|
## Lists
|
|
|
|
```scss
|
|
$list: (a b c);
|
|
|
|
nth($list, 1) /* starts with 1 */
|
|
length($list)
|
|
|
|
@each $item in $list { ... }
|
|
```
|
|
|
|
## Maps
|
|
|
|
```scss
|
|
$map: (key1: value1, key2: value2, key3: value3);
|
|
|
|
map-get($map, key1)
|
|
```
|
|
|
|
## Reference
|
|
|
|
- <http://sass-lang.com/documentation/Sass/Script/Functions.html>
|
|
- <http://sass-lang.com/documentation/file.SASS_REFERENCE.html#sassscript>
|