Sass is an extension of CSS3 which
adds nested rules, variables, mixins,
selector inheritance, and more. Sass
generates well formatted CSS and
makes your stylesheets easier to
organize and maintain.
Slide 22
Slide 22 text
A computer program that modifies
data to conform with the input
requirements of another program.
Slide 23
Slide 23 text
SASS
Slide 24
Slide 24 text
SASS
CSS
Slide 25
Slide 25 text
CSS
MAGIC
SASS
Slide 26
Slide 26 text
THe
OTHERS
Slide 27
Slide 27 text
No content
Slide 28
Slide 28 text
No content
Slide 29
Slide 29 text
No content
Slide 30
Slide 30 text
I used to
Drink the
hard stuff
Slide 31
Slide 31 text
CSS can be
Beautiful
Slide 32
Slide 32 text
Let’s get
Started
Slide 33
Slide 33 text
Mod. ARCH.
Variables
Nesting
Extend
Mixins
Functions
IF ELSE
each
Compass
UI/UX
Smiles
The @if directive takes a condition to evaluate
and returns the nested styles if the condition is
truthy (not false or null).
Specifying what to return if the condition is
falsey can be done using the @else statement.
Slide 82
Slide 82 text
http://bit.ly/sass-ifelse
Slide 83
Slide 83 text
[at]EACH
Slide 84
Slide 84 text
The @each directive takes the form
@each $var in
$var can be any variable name, and
is a SassScript expression
that returns a list
Slide 85
Slide 85 text
http://bit.ly/sass-each
Slide 86
Slide 86 text
MEDIa
Queries
Slide 87
Slide 87 text
No content
Slide 88
Slide 88 text
No content
Slide 89
Slide 89 text
Yes, media queries can actually be simple!
Slide 90
Slide 90 text
http://bit.ly/sass-media
Slide 91
Slide 91 text
Still, we shouldn’t be spending our
time writing mixins and extending
all over the place.
There’s gotta be something better.