Atlanta Drupal Users Group - Lightning Talks - Sass

850 views

Published on

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

Published in: Education
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
850
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
4
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

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? http://sass-lang.com/guide
  13. 13. Twitter - @esembrat Web - http://ericsembrat.com Email - ericsembrat@gmail.com That’s all, folks!

×