As the line between designer and developer continues to blur, we need more from CSS than it can offer. Sass is an extension of CSS that adds basic features CSS is sorely missing (like variables and nesting). But Sass kicks things to a new level with mixins (flexible, re-usable blocks of CSS) and advanced selector inheritance. Simply put, Sass makes CSS authoring fun again.

1. Sassive Aggressive
// Level Up Your CSS with Sass
@import the-awesome

2. What is Sass?

3. What is Sass?
Syntactically
awesome
stylesheets

4. We all use CSS sucks

5. but
We all use CSS sucks

6. but
We all use CSS sucks
Especially if you’ve used Sass.

7. Sass takes everything
that’s missing from CSS
and puts it into CSS.

8. Sass takes everything
that’s missing from CSS
and puts it into CSS.

9. Things like…
h1 {
color: #000;
font: 16px/1.6 Georgia;
margin: 0;
}

10. Variables
h1 {
color: $logo-color;
font: 16px/1.6 Georgia;
margin: 0;
}

11. Nesting
h1 {
color: #000;
font: 16px/1.6 Georgia;
margin: 0;
a {
display: block;
width: 100px;
height: 50px;
}
}

12. The Ampersand
h1 {
color: #000;
font: 16px/1.6 Georgia;
margin: 0;
&.new {
color: red;
}
}

13. Selector Inheritance
h1 {
color: #000;
font: 16px/1.6 Georgia;
margin: 0;
}
h2 {
@extend h1;
font-size: 14px;
}

14. Calculations
h1 {
color: #000;
font: 16px/1.6 Georgia;
margin: $default_margin * 2;
}

15. Color Manipulation
h1 {
color: lighten(#000, 25%);
font: 16px/1.6 Georgia;
margin: 0;
}

16. Mixins
h1 {
color: #000;
font: 16px/1.6 Georgia;
margin: 0;
@include border-radius(4px);
}

17. And so, so much more.

18. Sass does not replace CSS.

19. Sass does not replace CSS.
Sass makes CSS.

20. Sass does not replace CSS.
Sass makes CSS.
better.

21. Three more things
before we play…

22. 1 What’s ?
http://compass-style.org
• a framework that uses Sass
• an open source project
• a collection of reusable design patterns that
makes using the latest CSS features super easy
Compass is not Sass, but they are oen grouped
together.

23. 2 Two Syntaxes
SCSS

24. 2 Two Syntaxes
SCSS
h1 {
color: #000;
font: 16px/1.6 Georgia;
margin: 0;
a {
display: block;
width: 100px;
height: 50px;
}
}

25. 2 Two Syntaxes
SCSS booooooo
h1 {
color: #000;
font: 16px/1.6 Georgia;
margin: 0;
a {
display: block;
width: 100px;
height: 50px;
}
}

26. 2 Two Syntaxes
SCSS booooooo
h1 { of the
color: #000; ’s op inion
ER: A dam
esent Joel’s
S CLAIM 16px/1.6 pr
font: ot re Georgia; .
DI ta x do n yntax
SCS S margin:f the SCSS s
syn 0;
opin{
a ion o
display: block;
width: 100px;
height: 50px;
}
}

27. 2 Two Syntaxes
Sass
h1
color: #000
font: 16px/1.6 Georgia
margin: 0
a
display: block
width: 100px
height: 50px

28. 2 Two Syntaxes
Sass yaaaaaay
h1
color: #000
font: 16px/1.6 Georgia
margin: 0
a
display: block
width: 100px
height: 50px

29. 3 The Command Line
Don’t be afraid.

30. Let’s look at some code!

31. itche d to a
point , we sw th Sass/
TE: A t this tratio n (wi
NO demo ns to-up dating
liv e code e left and au
on th n the r ight).
SCSS iled C SS o
comp

32. See the code:
https://github.com/jayroh/sass-harvard
Note that the code samples are stored within the same file, but on
different branches. Here are the direct links to each branch:
Ampersand (Sass/SCSS) Mixins (Sass/SCSS)
Calculations (Sass/SCSS) Nesting (Sass/SCSS)
Colors (Sass/SCSS) Partials (Sass/SCSS)
Compass (Sass/SCSS) Responsive (Sass/SCSS)
Extend (Sass/SCSS) Sprites (Sass/SCSS)
Loops (Sass/SCSS) Variables (Sass/SCSS)

33. Who are these guys?
Joel Oliveira Adam Darowski
e47th PatientsLikeMe
@jayroh @adarowski