Atlanta Drupal Users Group - Lightning Talks - Sass

  • 419 views
Uploaded on

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

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

More in: Education
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
419
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
2
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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!