sass lesson

10. SASS/README.md

@@ -0,0 +1,184 @@
+# SASS
+
+## Lesson Objectives
+
+1. Install SASS
+1. Save values in variables
+1. Nest rules inside each other
+1. Separate code out into partials
+1. Import partials
+1. Create a mixin
+1. Have rules inherit values
+1. Use Operators
+
+## Install SASS
+
+You can install as a node package or a ruby gem.  Let's use node:
+
+```
+sudo npm install -g sass
+```
+
+Now you can use the following to compile the sass file called `index.scss` to `index.css`
+
+```
+sass index.scss index.css
+```
+
+## Save values in variables
+
+```css
+$primary-color: #333;
+body {
+    color: $primary-color;
+}
+```
+
+after compiling, you should get:
+
+```css
+body {
+    color: #333;
+}
+```
+
+## Nest rules inside each other
+
+You can have nest rules within each other, just like in HTML
+
+```css
+nav {
+    ul {
+        margin:0;
+    }
+    a {
+        display: block;
+    }
+}
+```
+
+This will output:
+
+```css
+nav ul {
+    margin:0
+}
+nav a {
+    display: block;
+}
+```
+
+## Separate code out into partials
+
+Partials are just `.scss` files with a leading underscore (`_`).  The underscore lets Sass know that the file is only a partial file and that it should not be generated into a CSS file.
+
+Try it in `_nav.scss`
+
+```css
+nav {
+    padding: 10px;
+}
+```
+
+## Import partials
+
+To import a partial:
+
+```css
+body {
+	font: Arial;
+}
+
+@import 'nav';
+```
+
+This produces:
+
+```css
+body {
+  font: Arial;
+}
+
+nav {
+  padding: 10px;
+}
+```
+
+## Create a mixin
+
+Mixins are like functions.  They produce rules based on some (or no) parameters:
+
+```css
+@mixin border-radius($radius) {
+  -webkit-border-radius: $radius;
+     -moz-border-radius: $radius;
+      -ms-border-radius: $radius;
+          border-radius: $radius;
+}
+
+.box { @include border-radius(10px); }
+```
+
+## Have rules inherit values
+
+You can have a set of rules be inherited by a rule:
+
+```css
+%box {
+    border:1px solid black;
+    padding: 10px;
+}
+
+.plain-box {
+    @extend %box;
+    background: grey;
+}
+
+.awesome-box{
+    @extend %box;
+    background: red;
+}
+```
+
+This produces:
+
+```css
+.awesome-box, .plain-box {
+  border: 1px solid black;
+  padding: 10px;
+}
+
+.plain-box {
+  background: grey;
+}
+
+.awesome-box {
+  background: red;
+}
+```
+
+## Use Operators
+
+You can use all your usual math operators (`+-*/%`) in sass:
+
+```css
+article{
+  width: 600px / 960px * 100%;
+}
+
+aside{
+  width: 300px / 960px * 100%;
+}
+```
+
+This will produce:
+
+```css
+article {
+  width: 62.5%;
+}
+
+aside {
+  width: 31.25%;
+}
+```