Sass Your Drupal Themes
Presented By Eric Scott SembratGeorgia Tech: College of Engineering
March 2014: Atlanta Drupal Users Group
Veronica Mars agrees...
CSS is a chore to use in today’s web.
Media Queries
Breakpoints
Grid Frameworks
Vendor-Specific CSS3
Repeating CSS
Everywhere
How do we fix this?
This is where Sass saves the day!
Introducing Sass
Sass is a stylesheet language to pre-process CSS styling.
file.scss file.css
compilationmagic
What’s the big deal?
What can we do with Sass, anyways?
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.
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!
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.
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.
Partials
Partials allow for compartmentalizing of your CSS into separate Sass files.
file.scss file.css
compilationmagic
_header.scss
_footer.scss
Ready to learn?
http://sass-lang.com/guide
Twitter - @esembratWeb - http://ericsembrat.comEmail - [email protected]
That’s all, folks!