87 lines
1.1 KiB
Plaintext
87 lines
1.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 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;
|
|
}
|
|
|
|
```
|