SASS

By Stef Horner, MD

Intro: What is SASS?

Preprocessor (filter)

Something that filters some text, or code, and then outputs it

CSS

CSS is optimised for rendering, not for writing

It can, therefore, get quite repetitive...

SASS

Does not add anything to CSS

Will make your CSS more managable

Setup

Ruby

LiveReload

On the Mac App Store

Part I: Expressions, Variables and functions

Expressions

(maths)

0.333333

1/3

0.333333 %

( 1/3 ) %

1 + 4 + 7

Example: Repetition

Variables

Assignment:

$variable: 12px;
$colour: #FF0022;

Usage:

p {    font-size: $variable;    color: $colour;
}

Output:

p {
    font-size: 12px;
    color: #FF0022;
}

Variables II: With Expressions

$block-height: 100px;
$number-of-blocks: 3;

.block-container {
    height: $block-height * $number-of-blocks;
}

Note that words are separated by hyphens ( - ), like in CSS

Variables III: repetition

Replace duplicated colours with a useful variable name

They only need updating in one place

Functions

Readability
Repetition
Complicatedness

Functions II: Anatomy

name( input, more-input )

Functions III: Example

pi()

3.141.......

round( 3.2 )

pow( 4, 2 )

Styling a Button

Different styles in different states:

hovering
clicking
disabled
highlighted

Colour Functions!

http://sass-lang.com/documentation/Sass/Script/Functions.html

lighten( $colour, 10% )

darken( $colour, 10% )

desaturate( $colour, 10% )

transparentize( $colour, 10% )

hue( $colour, $degrees )

Part II: Nesting

Repetition & Expressivity

.main p { color: $black }
.main p.highlight { color: $green }

You can nest child rules inside parent ones

.main {
    p {        color: $black;    }    p.highlight {        color: $black;    }}

RULE: Deep Nesting

Do not go more than 4 nests deep

This is the rule, there are always exceptions

Be as specific as you can be

Be only as specific as you need to be

More Nesting (&)

p { colour: $green }
p.highlight { colour: $red }
p.big { size: 1.2em }

You can use the ampersand (&) to keep nesting on the current element

p {
    color: $green;
    &.highlight { color: $red; }
    &.big { size: 1.2em; }
}

Part III: Structure

Files & Naming

All files get compiled into their own CSS file

Partials

Start with an underscore ( _ )

Do not get compiled into their own file

Directives

Messages to the preprocessor

Directives start with an at ( @ ) symbol

You can import any other .scss file with the @import directive

Files: _variables.scss _grid.scss style.scss

inside style.scss:

@import "variables"
@import "grid"

Make things modular

Keep files small

Separate unrelated things

What should have its own file?

Variables

Boilerplate

Elements

Sections

Themes