sass_compass_unleashed/presentation/02_sass.slides
2012-03-23 10:31:31 -04:00

152 lines
2.1 KiB
Plaintext

!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