css-notes/10. SASS/README.md

# 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%;
}
```