Update

sass.md

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