Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Atlanta Drupal Users Group - Lightning Talks - Sass


Published on

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

Published in: Education
  • Be the first to comment

Atlanta Drupal Users Group - Lightning Talks - Sass

  1. 1. Sass Your Drupal Themes Presented By Eric Scott Sembrat Georgia Tech: College of Engineering March 2014: Atlanta Drupal Users Group
  2. 2. Veronica Mars agrees... CSS is a chore to use in today’s web.
  3. 3. Media Queries Breakpoints Grid Frameworks Vendor-Specific CSS3 Repeating CSS Everywhere
  4. 4. How do we fix this? This is where Sass saves the day!
  5. 5. Introducing Sass Sass is a stylesheet language to pre- process CSS styling. file.scss file.css compilation magic
  6. 6. What’s the big deal? What can we do with Sass, anyways?
  7. 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. 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. 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. 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. 11. Partials Partials allow for compartmentalizing of your CSS into separate Sass files. file.scss file.css compilation magic _header.scss _footer.scss
  12. 12. Ready to learn?
  13. 13. Twitter - @esembrat Web - Email - That’s all, folks!