Sass: An Introduction
Founder’s Hub, Cardiff.
January 2014
Slide 2
Slide 2 text
About Me.
Stuart Robson
!
front-end developer
!
rwdcalc.com
SassnotSASS.com
!
Sassifaction
Slide 3
Slide 3 text
A small caveat
I don’t know _everything_
Slide 4
Slide 4 text
What is Sass?
Slide 5
Slide 5 text
Syntactically Awesome Stylesheets
A pre-processor making CSS fun again.!
Hampton Catlin created it in 2006 to work along
side HAML!
Nathan Weizenbaum began to assist and
develop it late 2006!
Chris Epstein committed the first version of
Compass in Autumn 2008
Slide 6
Slide 6 text
Alternatives to Sass
Slide 7
Slide 7 text
The Tale of Two Syntaxes
Slide 8
Slide 8 text
Sass
Slide 9
Slide 9 text
SCSS
Slide 10
Slide 10 text
Installing Sass…
PrePros
Slide 11
Slide 11 text
No content
Slide 12
Slide 12 text
Your First Sass file
Slide 13
Slide 13 text
CSS and Sass
commenting
‘CSS’ style comments are retained unless :compressed
Unless you write - /*! comment */
The Facebook Blue
Declared 261 times throughout all stylesheets!
Imagine if Zuck wanted to change the shade?
#3B5998
Slide 20
Slide 20 text
No content
Slide 21
Slide 21 text
Webfonts with easy fallbacks
Slide 22
Slide 22 text
No content
Slide 23
Slide 23 text
Border Radius Margin
Media Queries
Border Padding
Slide 24
Slide 24 text
Nesting
Slide 25
Slide 25 text
Don’t follow DOM
Slide 26
Slide 26 text
3 levels deep
When nesting your Sass, don’t go any further than 3 levels deep
helps performance (although negligible).!
helps sanity when looking at your code.
Slide 27
Slide 27 text
Combining Selectors
Slide 28
Slide 28 text
The Powerful Ampersand
Slide 29
Slide 29 text
The Parent Selector
using the &(ampersand) reference the parent selector
Slide 30
Slide 30 text
No content
Slide 31
Slide 31 text
@mixins
resusable code snippets!
customisable but you can set default $arguments
Slide 32
Slide 32 text
@mixins
Make Sass write the menial bits of CSS for you
Slide 33
Slide 33 text
@extend
clones the attributes from a rule and adds them
to another rule!
be careful, with great power comes great
responsibility
Slide 34
Slide 34 text
@extends
Slide 35
Slide 35 text
Using @extend badly
Slide 36
Slide 36 text
%placeholders
they can be @extend-ed just like existing classes
or IDs.!
the @extend-ed %placeholder will be generated.!
the actual %placeholder selector won’t be
generated.
or ‘silent classes’
Slide 37
Slide 37 text
%placeholders
or ‘silent classes’
Slide 38
Slide 38 text
Functions
Math Operators
+, -, *, /, and %
Slide 39
Slide 39 text
Functions
Number Functions
Slide 40
Slide 40 text
Functions
Control Directives
@if
@for
@each
@while
Slide 41
Slide 41 text
Functions
@for loop
Slide 42
Slide 42 text
Functions
@each loop
Slide 43
Slide 43 text
Colour
Slide 44
Slide 44 text
@content
allow you to pass anything into a mixin!
I mainly use it for media queries!
could be added to the bottom of any mixin,
just in case
Slide 45
Slide 45 text
@content
Slide 46
Slide 46 text
@content & media queries
Slide 47
Slide 47 text
@content, media queries
and Internet Explorer
Slide 48
Slide 48 text
A CSS authoring framework
Slide 49
Slide 49 text
What’s in Compass
CSS3 mixins!
typographic rhythm!
sprite generation!
loads of helpers
Slide 50
Slide 50 text
Lots of Sass mixins
grids typographical !
stylesheet
Slide 51
Slide 51 text
Sass 3.3
Slide 52
Slide 52 text
Sass 3.3
Sourcemaps - so you can see what you’re editing
in devtools.!
Improved & support!
Maps support!
@at-root rule