A short primer on why Sass is so sassy for theme development and maintenance!

1. Sass Your Drupal Themes
Presented By Eric Scott Sembrat
Georgia Tech: College of Engineering
March 2014: Atlanta Drupal Users Group

2. Veronica Mars agrees...
CSS is a chore to
use in today’s web.

3. Media Queries
Breakpoints
Grid Frameworks
Vendor-Specific CSS3
Repeating CSS
Everywhere

4. How do we fix this?
This is where Sass
saves the day!

5. Introducing Sass
Sass is a stylesheet language to pre-
process CSS styling.
file.scss file.css
compilation
magic

6. What’s the big deal?
What can we do with
Sass, anyways?

7. Nested Rules
#main {
background-color: #FFCBDB;
color: #666666;
}
.warning {
background-color: #FF0000;
color: #000000;
}
#main {
background-color: #FFCBDB;
color: #666666;
}
#main .warning {
background-color: #FF0000;
color: #000000;
}
Nesting allows you to apply the same clean,
hierarchy-driven visual makeup of HTML to CSS.

8. Variables & Functions
$radyellow: #EEAD0E;
#main {
background-color: $radyellow;
color: darken($radyellow, 30%);
}
#main {
background-color: #EEAD0E;
color: #5e4406;
}
Works with any CSS value
you can think of!

9. Operators
#main {
$localwidth: 500px;
.panel {
width: $localwidth/10;
}
}
#main .panel {
width: 100px;
}
Computing grid-layouts and element placement
is no longer a chore.
Let Sass do the number-crunching for you.

10. Mixins
@mixin atlantafun() {
$atl_peach: #FFD8AD;
background-color: $atl_peach;
}
body {
.view-grid {
@include atlantafun();
}
}
body .view-grid {
background-color: #FFD8AD;
}
Mixins define a group of CSS declarations that
you can reuse throughout your theme. These
mixins can even include arguments.

11. Partials
Partials allow for compartmentalizing
of your CSS into separate Sass files.
file.scss file.css
compilation
magic
_header.scss
_footer.scss

12. Ready to learn?
http://sass-lang.com/guide

13. Twitter - @esembrat
Web - http://ericsembrat.com
Email - ericsembrat@gmail.com
That’s all, folks!