berlin amsterdam san francisco singapore stuttgart
edenspiekermann_
Three years
of purging Sass
Frontend Conference (Zurich)
August 27th, 2015
Slide 2
Slide 2 text
I’m Hugo.
I’m 23.
I’m a front-end dev at
Edenspiekermann, in Berlin.
I like Sass and burgers.
Slide 3
Slide 3 text
3+ years of Sass.
30+ projects.
300+ pull-requests.
Tl;dr: we can do better.
Slide 4
Slide 4 text
Sass units
Sass lists
null value
code quality
Sass not SASS
Slide 5
Slide 5 text
Sass units
Slide 6
Slide 6 text
Same as in
real life
Slide 7
Slide 7 text
Adding a unit
Slide 8
Slide 8 text
1 cat * 3
= 3 cats
Slide 9
Slide 9 text
3 + cat
= “3cat”
Slide 10
Slide 10 text
$foo: 42 + px
Slide 11
Slide 11 text
$foo: 42#{px}
Slide 12
Slide 12 text
$foo * 2
Slide 13
Slide 13 text
42px is not a
number
Slide 14
Slide 14 text
No content
Slide 15
Slide 15 text
$foo: 42 * 1px
Slide 16
Slide 16 text
$foo: 42 + 0px
Slide 17
Slide 17 text
$foo * 2
= 84px
Slide 18
Slide 18 text
Removing a
unit
Slide 19
Slide 19 text
3 cats / 1 cat
= 3
Slide 20
Slide 20 text
str-slice
Slide 21
Slide 21 text
$n /
($n * 0 + 1)
Slide 22
Slide 22 text
$foo / 1px
= 84
Slide 23
Slide 23 text
Square units
Slide 24
Slide 24 text
m * m = m²
Slide 25
Slide 25 text
px * px = px²
Slide 26
Slide 26 text
42px * 2px
Slide 27
Slide 27 text
“84px*px isn't a
valid CSS value.”
Slide 28
Slide 28 text
No content
Slide 29
Slide 29 text
42px * 2
= 84px
Slide 30
Slide 30 text
42 * 2px
= 84px
Slide 31
Slide 31 text
42 * 2 * 1px
= 84px
Slide 32
Slide 32 text
Sass lists
Slide 33
Slide 33 text
Already in
CSS
Slide 34
Slide 34 text
font-family,
padding…
Slide 35
Slide 35 text
Commas or
spaces
Slide 36
Slide 36 text
“‘Helvetica’,
‘Arial’, sans-serif”
Slide 37
Slide 37 text
(‘Helvetica’,
‘Arial’, sans-serif)
Slide 38
Slide 38 text
$font: $font +
sans-serif
Slide 39
Slide 39 text
$font: append(
$font, sans-serif)
Slide 40
Slide 40 text
Use them,
not strings
Slide 41
Slide 41 text
null value
Slide 42
Slide 42 text
“empty”
Slide 43
Slide 43 text
nil
Slide 44
Slide 44 text
undefined
Slide 45
Slide 45 text
NULL
Slide 46
Slide 46 text
false
Slide 47
Slide 47 text
No output
Slide 48
Slide 48 text
$foo: null
color: $foo
Slide 49
Slide 49 text
Code quality
Slide 50
Slide 50 text
Readable
calculations
Slide 51
Slide 51 text
$i*2/3+.5
Slide 52
Slide 52 text
($i * 2) / 3 + 0.5
Slide 53
Slide 53 text
Hyphenated
variables
Slide 54
Slide 54 text
$baseFontSize
Slide 55
Slide 55 text
$base-font-size
Slide 56
Slide 56 text
“-” == “_”
Slide 57
Slide 57 text
map-get ==
map_get
Slide 58
Slide 58 text
map-get
map_get
Slide 59
Slide 59 text
Keep it cool
with nesting
Slide 60
Slide 60 text
It’s not
Russian Dolls.
Slide 61
Slide 61 text
nav {
…
ul {
…
li {
…
a {
…
&:hover {
…
}
}
}
}
}
Nope.
Slide 62
Slide 62 text
Pyramid
of doom
Slide 63
Slide 63 text
nav { … }
nav ul { … }
nav li { … }
nav a { … }
nav a:hover { … }
Slide 64
Slide 64 text
Wall of
consistency
Slide 65
Slide 65 text
Sass-
guidelin.es
Slide 66
Slide 66 text
Sass not SASS
Slide 67
Slide 67 text
It’s a
backronym
Slide 68
Slide 68 text
Don’t yell it
Slide 69
Slide 69 text
It’s “Sass”
Slide 70
Slide 70 text
Let’s sum up
Slide 71
Slide 71 text
Sass units work
as in real life
Slide 72
Slide 72 text
Lists can be
used in CSS
Slide 73
Slide 73 text
The null value
means “empty”
Slide 74
Slide 74 text
Heavy nesting
is harmful
Slide 75
Slide 75 text
Code guidelines
are vital
Slide 76
Slide 76 text
It’s Sass
not SASS
Slide 77
Slide 77 text
berlin amsterdam san francisco singapore stuttgart
edenspiekermann_
Thank you. Any question?
-> @HugoGiraudel
Hugo Giraudel, Front-end Developer
@HugoGiraudel
[email protected]
www.edenspiekermann.com