Add Lighten And Darken With SCSS as a css til

css/lighten-and-darken-with-scss.md

@@ -0,0 +1,37 @@
+# Lighten And Darken With SCSS
+
+With SCSS, a color can be lightened or darkened by a certain percentage
+using the
+[`lighten`](http://sass-lang.com/documentation/Sass/Script/Functions.html#lighten-instance_method)
+and
+[`darken`](http://sass-lang.com/documentation/Sass/Script/Functions.html#darken-instance_method)
+functions, respectively.
+
+For instance, given the following HTML
+
+```html
+<div class='one'></div>
+<div class='two'></div>
+<div class='three'></div>
+```
+
+I can style `div.two` with the original color and then style `div.one` with
+a lightened version and `div.three` with a darkened version.
+
+```scss
+$box-color: #0074d9;
+
+.two {
+  background: $box-color;
+}
+.one {
+  background: lighten($box-color, 20%);
+}
+.three {
+  background: darken($box-color, 20%);
+}
+```
+
+The result looks something like this:
+
+![](http://i.imgur.com/SaeTL8H.png)