Atlanta Drupal Users Group - Lightning Talks - Sass

50 %
50 %
Information about Atlanta Drupal Users Group - Lightning Talks - Sass
Education

Published on March 10, 2014

Author: webbeh

Source: slideshare.net

Description

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

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!

#main presentations

Add a comment

Related presentations

Related pages

The Atlanta Drupal User's Group (Atlanta, GA) - Meetup

The Atlanta Drupal Users Group (ADUG) is a community of designers, developers, site builders, and engineers who work with Drupal to create websites and web ...
Read more

Atlanta Drupal Users Group - Lightning Talks - Sass ...

1. Sass Your Drupal Themes Presented By Eric Scott Sembrat Georgia Tech: College of Engineering March 2014: Atlanta Drupal Users Group
Read more

June 2014 - Georgia Tech Drupal Users Group - Education

Georgia Tech Drupal Users Group June 2014 ... Atlanta Java Users Group ... Atlanta Drupal Users Group - Lightning Talks - Sass.
Read more

ABQ Drupal Users Group Presentation 2014/07/10 - Documents

Download ABQ Drupal Users Group Presentation 2014/07/10. ... Mark Casias Sr Drupal Developer for Mediacurrent @teampoop ABQ WebGeeks ABQ Drupal Users Who ...
Read more

PDF Book - Mediafile File Sharing - dloadvad.ru

How it works: 1. Register a free 1 month Trial Account. 2. Download as many books as you like (Personal use) 3. Cancel the membership at any time if not ...
Read more

DOWNLOAD Vampire et Indésirable - bookalltt.ru

DOWNLOAD Vampire et Indésirable - bookalltt.ru
Read more

DOWNLOAD Making Sense of Education - bookalltt.ru

DOWNLOAD Making Sense of Education - bookalltt.ru
Read more

Furk.net

Furk.net is your personal secure storage that fetches media files and lets you ... not required for Facebook users . Account. Login/Register ...
Read more