diff --git a/10. SASS/README.md b/10. SASS/README.md index e69de29..44a070d 100644 --- a/10. SASS/README.md +++ b/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%; +} +```