1. Dave Ross • Fox Valley Computing Professionals
April 10, 2012

2. Sass
Syntactically Awesome Stylesheets
sass-lang.com

3. Valid CSS is valid Sass
@import “reset.css”; /* reset.css gets put here */
#content { #content {
font-face: Helvetica, Arial; font-face: Helvetica, Arial;
font-size: 14px; font-size: 14px;
} }
! !
#content blockquote { #content blockquote {
color: #0f0;! color: #0f0;!
} }

4. Nesting
#content { #content {
font-face: Helvetica, Arial; font-face: Helvetica, Arial;
font-size: 14px; font-size: 14px;
}
blockquote { !
color: #0f0; #content blockquote {
} color: #0f0;!
} }

5. Variables
$green: #0f0; #content {
font-face: Helvetica, Arial;
#content { font-size: 14px;
font-face: Helvetica, Arial; border: 1px solid #0f0;
font-size: 14px; }
border: 1px solid $green; !
#content blockquote {
blockquote { ! color: #0f0;!
color: $green; }
}
}

6. Math & Built-in Functions
$green: #0f0; #content {
$normal_font_size: 14px; font-face: Helvetica, Arial;
font-size: 14px;
#content { border: 1px solid $0f0;
font-face: Helvetica, Arial; }
font-size: $normal_font_size;
border: 1px solid $green; #content h1 {
h1 { font-size: 28px;
font-size: $normal_font_size * 2; }
}
blockquote { #content blockquote {
color: darken($green, 50%); color: #080;
} }
}

7. Inheritance
.error { .error, .major_error {
color: #f00; color: #f00;
font-face: “Comic Sans”; font-face: “Comic Sans”;
} }
.major_error { .major_error {
@extend .error; font-size: 4em;
font-size: 4em; }
}

8. Mixins (functions)
@mixin left($offset) { img {
float: left; float: left;
margin-left: $offset; margin-left: 1em;
} }
img { img.off_the_edge {
@include left(1em); float: left;
} margin-left: -2em;
}
img.off_the_edge {
@include left(-2em);
}

9. @media Bubbling
button { button {
color: #fff; color: #fff;
background-color: #003; background-color: #003;
@media screen and max-width: 280px) { }
height: 44px; @media screen and max-width: 280px) {
} button {
} height: 44px;
}
p{ }
font-size: 12px;
@media screen and max-width: 280px) { p{
font-size: 14px; font-size: 12px;
} }
}
@media screen and max-width: 280px) {
p{
font-size: 14px;
}
}

10. Compass
CSS framework built on Sass
compass-style.org

11. Cross-Browser CSS3
@import “compass/css3/box-shadow”; #sidebar {
@import “compass/css3/borer-radius”; -webkit-box-shadow: #000 2px 2px 2px;
-moz-box-shadow: #000 2px 2px 2px;
#sidebar { box-shadow: #000 2px 2px 2px;
@include box-shadow(#000 2px 2px 2px); }
}
.widget {
.widget { -webkit-border-radius: 4px;
@include border-radius(4px); -moz-border-radius: 4px;
} -o-border-radius: 4px;
-ms-border-radius: 4px;
-khtml-border-radius: 4px;
border-radius: 4px;
}
/* Includes JS polyfill for IE */

12. Common Styling
@import .footer a {
“compass/typography/links/unstyled-link”; color: inherit;
text-decoration: inherit;
.footer a { cursor: inherit;
@include unstyled-link; &:active, &:focus {
} outline: none;
}
}

13. Blueprint
@import “blueprint/grid”; Can you just trust me on this one?
#content {
@include container;
#left {
@include column(8);
}
#right {
@include column(16);
@include last;
}
}

14. Try it today!

15. CodeKit (Mac)

16. Compass.app (Mac, Windows, Linux)

17. gem install sass
sass --watch stylesheets/sass:stylesheets/compiled
Old School Ruby Gem