css-notes/10. SASS/README.md

SASS

Lesson Objectives

1. Install SASS
2. Save values in variables
3. Nest rules inside each other
4. Separate code out into partials
5. Import partials
6. Create a mixin
7. Have rules inherit values
8. 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

$primary-color: #333;
body {
    color: $primary-color;
}

after compiling, you should get:

body {
    color: #333;
}

Nest rules inside each other

You can have nest rules within each other, just like in HTML

nav {
    ul {
        margin:0;
    }
    a {
        display: block;
    }
}

This will output:

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

nav {
    padding: 10px;
}

Import partials

To import a partial:

body {
	font: Arial;
}

@import 'nav';

This produces:

body {
  font: Arial;
}

nav {
  padding: 10px;
}

Create a mixin

Mixins are like functions. They produce rules based on some (or no) parameters:

@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:

%box {
    border:1px solid black;
    padding: 10px;
}

.plain-box {
    @extend %box;
    background: grey;
}

.awesome-box{
    @extend %box;
    background: red;
}

This produces:

.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:

article{
  width: 600px / 960px * 100%;
}

aside{
  width: 300px / 960px * 100%;
}

This will produce:

article {
  width: 62.5%;
}

aside {
  width: 31.25%;
}