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