Atlanta Drupal Users Group - Lightning Talks - Sass
Upcoming SlideShare
Loading in...5
×
 

Atlanta Drupal Users Group - Lightning Talks - Sass

on

  • 490 views

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!

Statistics

Views

Total Views
490
Views on SlideShare
490
Embed Views
0

Actions

Likes
1
Downloads
1
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Atlanta Drupal Users Group - Lightning Talks - Sass Atlanta Drupal Users Group - Lightning Talks - Sass Presentation Transcript

  • Sass Your Drupal Themes Presented By Eric Scott Sembrat Georgia 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 compilation magic
  • 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 compilation magic _header.scss _footer.scss
  • Ready to learn? http://sass-lang.com/guide
  • Twitter - @esembrat Web - http://ericsembrat.com Email - ericsembrat@gmail.com That’s all, folks!