49 lines
757 B
Plaintext
49 lines
757 B
Plaintext
!SLIDE
|
|
# Sass
|
|
|
|
!SLIDE
|
|
# What is Sass?
|
|
## Its a preprocesor
|
|
|
|
!SLIDE
|
|
# What does it do?
|
|
|
|
* Variables `$foo`
|
|
* Mixins `@mixin`
|
|
* Functions
|
|
* Selector Interitance `@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));
|
|
}
|
|
|
|
``` |