sass_compass_unleashed/presentation/02_sass.slides

!SLIDE
# Sass

!SLIDE
# What is Sass?
## Its a preprocesor

!SLIDE
# What does it do?

* Variables `$foo`
* Mixins `@mixin`
* Functions
* Selector Inheritance `@extend, &`
* Control Directives `@if, @for, @each, @while`
* Its a language!

!SLIDE variables
# Variables

``` scss

  $foo : #fffff;
  $bar : (1px * 2em) / 4px;

```

!SLIDE mixins

# Functions and Mixins

``` scss

@function get-stops($colors, $stops) {
  $out:();
  @each $color in $colors {
    $i: index($colors, $color);
    $stop: 0% + nth($stops, $i);
    $out: append($out, $color $stop, 'comma');
  }
  @return $out;
}

@mixin menu-level2-active {
  $args: get-stops($menu-active-colors, $menu-active-stops);
  @include background(linear-gradient($menu-active-direction, $args));
}

```

!SLIDE inheritance
# Inheritance
``` scss
a {
  color : $link-color;

  &:hover {
    color : $link-hover-color;
  }
}
```
``` css
a { color : blue; }
a:hover { color : red; }
```

!SLIDE extend
## Extend
``` scss

.foo {
  font-size : 10px;
}

.bar {
  @extend .foo;
}

```
``` css

.foo, .bar {
  font-size : 10px;
}

```