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 

# Lists

``` css
  border : 1px solid black;
```

!SLIDE

``` scss 
  $my-list : 1px solid black;
  $my-list2 : 1px, solid, black;
  $my-list3 : (1px solid black);

  border : $my-list;

```

!SLIDE

# In ruby

``` ruby 
  Sass::Script::List.new(['1px', 'solid', 'black'], ',')
```

!SLIDE
## List Functions

* `length($list)`
* `nth($list, $n)`
* `join($list1, $list2, [$separator])`
* More coming soon!



!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;
}

```

!SLIDE
## Extending with ruby

``` ruby
def sprite(map, sprite, offset_x = ZERO, offset_y = ZERO)
  sprite = convert_sprite_name(sprite)    
  verify_map(map)
  unless sprite.is_a?(Sass::Script::String)
    raise Sass::SyntaxError
  end
  url = sprite_url(map)
  position = sprite_position(map, sprite, offset_x, offset_y)
  Sass::Script::List.new([url] + position.value, :space)
end
Sass::Script::Functions.declare :sprite, [:map, :sprite]
Sass::Script::Functions.declare :sprite, [:map, :sprite, :offset_x]
Sass::Script::Functions.declare :sprite, [:map, :sprite, :offset_x, :offset_y]
```

!SLIDE
## Data types

 * Bool
 * Color
 * List
 * Number
 * String