Add Lighten And Darken With SCSS as a css til

Author: jbranchaud

README.md

@@ -7,14 +7,15 @@ variety of languages and technologies. These are things that don't really
 warrant a full blog post. These are mostly things I learn by pairing with
 smart people at [Hashrocket](http://hashrocket.com/).
 
-_377 TILs and counting..._
+_378 TILs and counting..._
 
 ---
 
 ### Categories
 
 * [Chrome](#chrome)
 * [Clojure](#clojure)
+* [CSS](#css)
 * [Devops](#devops)
 * [Elixir](#elixir)
 * [Git](#git)
@@ -58,6 +59,10 @@ _377 TILs and counting..._
 - [Type of Anything](clojure/type-of-anything.md)
 - [When Overflow Is Desired](clojure/when-overflow-is-desired.md)
 
+### CSS
+
+- [Lighten And Darken With SCSS](css/lighten-and-darken-with-scss.md)
+
 ### Devops
 
 - [Aliasing An Ansible Host](devops/aliasing-an-ansible-host.md)

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)