diff --git a/sass.md b/sass.md index eb71c61d1..46fead57f 100644 --- a/sass.md +++ b/sass.md @@ -22,21 +22,15 @@ mix($a, $b, 10%) /* 10% a, 90% b */ ```scss darken($color, 5%) lighten($color, 5%) -``` -``` saturate($color, 5%) desaturate($color, 5%) grayscale($color) -``` -```scss adjust-hue($color, 15deg) compliment($color) /* like adjust-hue(_, 180deg) */ invert($color) -``` -```scss fade-in($color, .5) fade-out($color, .5) /* halves the opacity */ rgba($color, .5) /* sets alpha to .5 */ @@ -73,6 +67,39 @@ unitless(100px) /* false */ ## 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 { @@ -81,6 +108,16 @@ $i: 6; } ``` +## Conditionals + +```scss +@if $position == 'left' { + left: 0; +} +@else $position == 'top' { +} +``` + ## Interpolation ```scss @@ -100,6 +137,15 @@ length($list) @each $item in $list { ... } ``` +## Maps + +```scss +$map: (key1: value1, key2: value2, key3: value3); + +map-get($map, key1) +``` + ## Reference - +-