Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Dallas Drupal Days 2012

Chris J. Lee
September 08, 2012

Dallas Drupal Days 2012

Introduction to css preprocessors.

http://hire.chrisjlee.net

Chris J. Lee

September 08, 2012
Tweet

Other Decks in Design

Transcript

  1. Prerequisites • Strong understanding of CSS • Familiarity with control

    structures, functions, variables • Lazy Desire to be more Efficient • Familiarity CSS3 • Interest in Theming
  2. What's in it for me? ... Goals • Understanding of

    High Level Purpose of Preprocessing languages • Learn how to get started • How this works with Drupal... Yes, there's a module for that!
  3. Why should i use less/sass? • Web is complex. No

    longer simple. • Front End Performance • DRY principle • Frameworks / OOCSS • Cross-Browser Compatibility • It's easy!
  4. Gaining Front End Performance • Reduce HTTP Number of Requests

    • Reduce, reuse, and recycle css • Compress assets
  5. Getting started Less / Sass 1. There's a module for

    it. 2. CLI: node.js / ruby gems 3. Client Side GUI's Any other methods? Let us all know!
  6. Method 1: Drupal Modules • Less http://drupal.org/project/less • Prepro http://drupal.org/project/prepro

    • Sassy http://drupal.org/project/sassy Others • Live CSS http://drupal.org/project/live_css • Sass http://drupal.org/project/sass
  7. Method 2: Command Line Processors • Node js $ npm

    install less $ sudo apt-get install node-less • ruby gem $ gem install sass $ gem install compass
  8. Method 3: Client Side GUIs Compass.app Mac / win /

    linux http://compass. handlino.com/
  9. Differences between Less / Sass? • Very little differences •

    Small syntax issues • Workflow • Frameworks / Library advantages
  10. Same Syntax: Less / Sass / Compass • Nested Structures

    // less // @file style.less.css body { .header { background: #fc0; } } // sass / scss // @file style.scss body { .header { background: #fc0; } }
  11. Same Syntax: Less / Sass / Compass • Importing files

    // sass or scss // @file style.scss @import "foo"; @import "foo.scss"; @import "http://foo.com/foo; @import url(foo); // less // @file style.less.css @import "file"; @import 'file.less'; @import http://foo. com/foo; @import url(file);
  12. Mixin "Mixins allow you to define styles that can be

    re-used throughout the stylesheet without needing to resort to non-semantic classes like . float-left. Mixins can also contain full CSS rules, and anything else allowed elsewhere in a Sass document. They can even take arguments which allows you to produce a wide variety of styles with very few mixins." - Sass-Lang.com
  13. Mixin // Less .border-radius(@r:0px) { -moz-border-radius: @r; -o-border-radius: @r; -khtml-border-radius:@r;

    -webkit-border-radius:@r; border-radius: @r; } // Sass @mixin border-radius($r:0px) { -moz-border-radius: $r; -o-border-radius: $r; -khtml-border-radius:$r; -webkit-border-radius:$r; border-radius: $r; }
  14. Mixin // Less .border-radius(@r:0px) { -moz-border-radius: @r; -o-border-radius: @r; -khtml-border-radius:@r;

    -webkit-border-radius:@r; border-radius: @r; } // "Invoke" the mixin .myDiv { .border-radius(2px+2px); } // Sass @mixin border-radius($r:0px) { -moz-border-radius: $r; -o-border-radius: $r; -khtml-border-radius:$r; -webkit-border-radius:$r; border-radius: $r; } // Invoke the mixin .myDiv { @include border-radius (2px+2px); }
  15. Lighten / Darkens // less lightness (@color, 10%); darkness (@color,

    10%); // scss @include lighten($color, 10%); @include darken($color, 10%);
  16. Sass project files Random Live Demonstration Time... - Demo2 -

    What is a project file - Demo3 - Creating a project with compass
  17. What is compass? • sass mixin library • sass meta

    framework • reduce low level tasks How do i install this? • Install with a rubygem $ gem install compass
  18. Learn more Less • http://lesscss.org/ • http://leafo.net/lessphp/docs/ Sass • http://sass-lang.com/

    • http://sass-lang.com/docs/yardoc/file. SASS_REFERENCE.html Compass • http://compass-style.org/