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.
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 oen grouped
together.
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
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