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 - ericsembrat@gmail.com

That’s all, folks!