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 ) %
12
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 )
3
pow( 4, 2 )
16
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
Sass Basics
By Stef Horner
Sass Basics
First Dev/Design Lunch about SASS
- 460