152 lines
2.1 KiB
Plaintext
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
|