x§
100% pure
@sturobson
Breaking Borders, Reading, October 2014
Slide 2
Slide 2 text
Stu Robson
Sass News
LDN Sass
SitePoint
front-end developer
@sturobson
Breaking Borders, Reading, October 2014
Slide 3
Slide 3 text
@sturobson
Breaking Borders, Reading, October 2014
Slide 4
Slide 4 text
No content
Slide 5
Slide 5 text
No content
Slide 6
Slide 6 text
@sturobson
Breaking Borders, Reading, October 2014
Slide 7
Slide 7 text
What is Sass?
@sturobson
Breaking Borders, Reading, October 2014
Slide 8
Slide 8 text
• Websites are getting bigger.
• Bigger sites mean more CSS.
• We need to organise our CSS so it’s maintainable
• Maintaining one CSS file is a pain.
@sturobson
Breaking Borders, Reading, October 2014
Slide 9
Slide 9 text
• Using a preprocessor can help this.
• Sass has features that don’t exist in CSS.
• Sass can make your stylesheets maintainable.
• Sass doesn’t fix your bad CSS.
@sturobson
Breaking Borders, Reading, October 2014
Slide 10
Slide 10 text
@sturobson
Breaking Borders, Reading, October 2014
Slide 11
Slide 11 text
.scss .css
@sturobson
Breaking Borders, Reading, October 2014
Slide 12
Slide 12 text
Sass not SASS
@sturobson
Breaking Borders, Reading, October 2014
Slide 13
Slide 13 text
“If you see something, say something.
Only you can prevent over-capitalisation.”
@sturobson
Breaking Borders, Reading, October 2014
Slide 14
Slide 14 text
#Sasshole
@sturobson
Breaking Borders, Reading, October 2014
Slide 15
Slide 15 text
Installing Sass
@sturobson
Breaking Borders, Reading, October 2014
Slide 16
Slide 16 text
@sturobson
Breaking Borders, Reading, October 2014
Slide 17
Slide 17 text
@sturobson
Breaking Borders, Reading, October 2014
Slide 18
Slide 18 text
@sturobson
Breaking Borders, Reading, October 2014
Slide 19
Slide 19 text
@sturobson
Breaking Borders, Reading, October 2014
Slide 20
Slide 20 text
@sturobson
Breaking Borders, Reading, October 2014
Slide 21
Slide 21 text
Variables
@sturobson
Breaking Borders, Reading, October 2014
Slide 22
Slide 22 text
• A way to store reusable information.
• Sass uses the $ to make a variable.
• When compiled replaces the $variable
through the stylesheet
Variables
@sturobson
Breaking Borders, Reading, October 2014
Slide 23
Slide 23 text
@sturobson
Breaking Borders, Reading, October 2014
Variables
Slide 24
Slide 24 text
@sturobson
Breaking Borders, Reading, October 2014
Variables
Slide 25
Slide 25 text
The Facebook Blue
#3B5998
@sturobson
Breaking Borders, Reading, October 2014
Variables
Slide 26
Slide 26 text
@sturobson
Breaking Borders, Reading, October 2014
Variables
Slide 27
Slide 27 text
Colour
Font Families
Margins
Paddings
Widths
Media Queries
Border Radius
Box Shadow
And so on
And so on
@sturobson
Breaking Borders, Reading, October 2014
Variables
Slide 28
Slide 28 text
Nesting
@sturobson
Breaking Borders, Reading, October 2014
Slide 29
Slide 29 text
• Sass allows rules to be nested within one
another.
• The inner rule only applies within the outer
rules selector.
• This can help make complex CSS much
simpler.
Nesting
@sturobson
Breaking Borders, Reading, October 2014
Slide 30
Slide 30 text
@sturobson
Breaking Borders, Reading, October 2014
Nesting
Slide 31
Slide 31 text
@sturobson
Breaking Borders, Reading, October 2014
Nesting
Slide 32
Slide 32 text
@sturobson
Breaking Borders, Reading, October 2014
Nesting
Slide 33
Slide 33 text
@sturobson
Breaking Borders, Reading, October 2014
Nesting
Slide 34
Slide 34 text
@sturobson
Breaking Borders, Reading, October 2014
Nesting
Slide 35
Slide 35 text
• Never go more than 4 levels deep.
• Never go more than 3 levels deep.
• Never nest your Sass.
@sturobson
Breaking Borders, Reading, October 2014
Nesting
Slide 36
Slide 36 text
Parent Selector
@sturobson
Breaking Borders, Reading, October 2014
Slide 37
Slide 37 text
Parent Selector
• Using the ampersand (&) references the
parent selector
• Allows for simple and complex usage than
just nesting
• The ‘&’ tells Sass to pull in the entire parent
selector where it’s placed.
@sturobson
Breaking Borders, Reading, October 2014
Slide 38
Slide 38 text
@sturobson
Breaking Borders, Reading, October 2014
Parent Selector
Slide 39
Slide 39 text
@sturobson
Breaking Borders, Reading, October 2014
Parent Selector
Slide 40
Slide 40 text
@sturobson
Breaking Borders, Reading, October 2014
Parent Selector
Slide 41
Slide 41 text
@sturobson
Breaking Borders, Reading, October 2014
Parent Selector
Slide 42
Slide 42 text
@sturobson
Breaking Borders, Reading, October 2014
Parent Selector
Slide 43
Slide 43 text
Mixins
@sturobson
Breaking Borders, Reading, October 2014
Slide 44
Slide 44 text
Mixins
• Allows you to create reusable blocks of
CSS.
• You can values into mixins to make the
more flexible.
• A good use of mixins (was) is for vendor
prefixes.
@sturobson
Breaking Borders, Reading, October 2014
Slide 45
Slide 45 text
@sturobson
Breaking Borders, Reading, October 2014
Mixins
Slide 46
Slide 46 text
@sturobson
Breaking Borders, Reading, October 2014
Mixins
Slide 47
Slide 47 text
Functions
@sturobson
Breaking Borders, Reading, October 2014
Slide 48
Slide 48 text
Functions
• Sass comes with some built-in functions
• Numeric Functions
• Colour Functions
@sturobson
Breaking Borders, Reading, October 2014