Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Introduction toLess / Sass / CompassPresented byChris Lee@levelten_chris
Prerequisites                ● Strong understanding of                  CSS                ● Familiarity with control     ...
Whats in it for me?... Goals● Understanding of High Level Purpose of  Preprocessing languages● Learn how to get started● H...
CSSLess / Sass /Compass
Why should i use less/sass?● Web is complex.  No longer simple.● Front End Performance● DRY principle● Frameworks / OOCSS●...
Gaining Front End Performance● Reduce HTTP Number of Requests● Reduce, reuse, and recycle css● Compress assets
Demonstration: VariablesCreate a variable file using sassopen "demo1"
Getting started Less / Sass1. Theres a module for it.2. CLI: node.js / ruby gems3. Client Side GUIsAny other methods? Let ...
Method 1: Drupal Modules● Less http://drupal.org/project/less● Prepro http://drupal.org/project/prepro● Sassy http://drupa...
Method 2: Command LineProcessors● Node js  $ npm install less  $ sudo apt-get install node-less● ruby gem  $ gem install s...
Method 3: Client Side GUIsSimpLessMac / Winhttp://wearekiss.com/simpless
Method 3: Client Side GUIsScout (mac)http://mhs.github.com/scout-app/
Method 3: Client Side GUIsCompass.appMac / win /linuxhttp://compass.handlino.com/
How does one pick a preprocessor?● Get Excited! Dive in.● Figure out workflow
Syntax
Differences between Less / Sass?● Very little differences● Small syntax issues● Workflow● Frameworks / Library advantages
IntroductoryPreprocessor Concepts●   Nested●   Mixins●   Control Structures●   Importing
Same Syntax: Less / Sass / Compass● Nested Structures// less                   // sass / scss// @file style.less.css   // ...
Same Syntax: Less / Sass / Compass● Importing files// less                   // sass or scss// @file style.less.css   // @...
Mixin"Mixins allow you to define styles that can bere-used throughout the stylesheet withoutneeding to resort to non-seman...
Mixin        TLDR;
Mixin// Less                         // Sass.border-radius(@r:0px) {        @mixin border-radius($r:0px) {   -moz-border-r...
Mixin// Less                          // Sass.border-radius(@r:0px) {         @mixin border-radius($r:0px) {   -moz-border...
Mixin: CSS Output.myDiv {  -moz-border-radius: 4px;  -o-border-radius: 4px;  -khtml-border-radius: 4px;   -webkit-border-r...
WHAT IT ADDS?!@!
2px + 2px = 4px
Lighten / Darkens// lesslightness (@color, 10%);darkness (@color, 10%);// scss@include lighten($color, 10%);@include darke...
Sass project filesRandom Live Demonstration Time...- Demo2 - What is a project file- Demo3 - Creating a project with compass
Frameworks
Less Frameworks● Bootstrap  http://twitter.github.com/bootstrap/● Centage  http://centage.peruste.net/
Sass Frameworks● Compass - http://compass-style.org/● Bourbon - http://thoughtbot.com/bourbon/● Foundation - https://githu...
What is compass?● sass mixin library● sass meta framework● reduce low level tasksHow do i install this?● Install with a ru...
Compass Example: Opacity @import "compass/css3/opacity" div.box {   $opacity: .9;   opacity($opacity); }
Compass Example: Opacitydiv.box {  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=90);  opacity: 0.9;}
Compass Example: url helpersdiv.box {  background: image-url(lolcat-bg.jpg);}
Compass Example: url helpersdiv.box {   background: sites/all/themes/foo/images   /lolcat-bg.jpg?4324343;}
Learn moreLess● http://lesscss.org/● http://leafo.net/lessphp/docs/Sass● http://sass-lang.com/● http://sass-lang.com/docs/...
Questions?
Questions?Arial 48pt. Google   Powerpoint
Questions?
Thanks!       Slides:http://goo.gl/71wK5
Upcoming SlideShare
Loading in …5
×

Dallas Drupal Days 2012 - Introduction to less sass-compass

2,272 views

Published on

Published in: Technology
  • Be the first to comment

Dallas Drupal Days 2012 - Introduction to less sass-compass

  1. 1. Introduction toLess / Sass / CompassPresented byChris Lee@levelten_chris
  2. 2. Prerequisites ● Strong understanding of CSS ● Familiarity with control structures, functions, variables ● Lazy Desire to be more Efficient ● Familiarity CSS3 ● Interest in Theming
  3. 3. Whats in it for me?... Goals● Understanding of High Level Purpose of Preprocessing languages● Learn how to get started● How this works with Drupal... Yes, theres a module for that!
  4. 4. CSSLess / Sass /Compass
  5. 5. Why should i use less/sass?● Web is complex. No longer simple.● Front End Performance● DRY principle● Frameworks / OOCSS● Cross-Browser Compatibility● Its easy!
  6. 6. Gaining Front End Performance● Reduce HTTP Number of Requests● Reduce, reuse, and recycle css● Compress assets
  7. 7. Demonstration: VariablesCreate a variable file using sassopen "demo1"
  8. 8. Getting started Less / Sass1. Theres a module for it.2. CLI: node.js / ruby gems3. Client Side GUIsAny other methods? Let us all know!
  9. 9. Method 1: Drupal Modules● Less http://drupal.org/project/less● Prepro http://drupal.org/project/prepro● Sassy http://drupal.org/project/sassyOthers● Live CSS http://drupal.org/project/live_css● Sass http://drupal.org/project/sass
  10. 10. Method 2: Command LineProcessors● Node js $ npm install less $ sudo apt-get install node-less● ruby gem $ gem install sass $ gem install compass
  11. 11. Method 3: Client Side GUIsSimpLessMac / Winhttp://wearekiss.com/simpless
  12. 12. Method 3: Client Side GUIsScout (mac)http://mhs.github.com/scout-app/
  13. 13. Method 3: Client Side GUIsCompass.appMac / win /linuxhttp://compass.handlino.com/
  14. 14. How does one pick a preprocessor?● Get Excited! Dive in.● Figure out workflow
  15. 15. Syntax
  16. 16. Differences between Less / Sass?● Very little differences● Small syntax issues● Workflow● Frameworks / Library advantages
  17. 17. IntroductoryPreprocessor Concepts● Nested● Mixins● Control Structures● Importing
  18. 18. Same Syntax: Less / Sass / Compass● Nested Structures// less // sass / scss// @file style.less.css // @file style.scssbody { body { .header { .header { background: #fc0; background: #fc0; } }} }
  19. 19. Same Syntax: Less / Sass / Compass● Importing files// less // sass or scss// @file style.less.css // @file style.scss@import "file"; @import "foo";@import file.less; @import "foo.scss";@import http://foo. @import "http://foo.com/foo;com/foo; @import url(foo);@import url(file);
  20. 20. Mixin"Mixins allow you to define styles that can bere-used throughout the stylesheet withoutneeding to resort to non-semantic classes like .float-left. Mixins can also contain full CSS rules,and anything else allowed elsewhere in a Sassdocument. They can even take argumentswhich allows you to produce a wide variety ofstyles with very few mixins."- Sass-Lang.com
  21. 21. Mixin TLDR;
  22. 22. Mixin// Less // Sass.border-radius(@r:0px) { @mixin border-radius($r:0px) { -moz-border-radius: @r; -moz-border-radius: $r; -o-border-radius: @r; -o-border-radius: $r; -khtml-border-radius:@r; -khtml-border-radius:$r; -webkit-border-radius:@r; -webkit-border-radius:$r; border-radius: @r; border-radius: $r;} }
  23. 23. Mixin// Less // Sass.border-radius(@r:0px) { @mixin border-radius($r:0px) { -moz-border-radius: @r; -moz-border-radius: $r; -o-border-radius: @r; -o-border-radius: $r; -khtml-border-radius:@r; -khtml-border-radius:$r; -webkit-border-radius:@r; -webkit-border-radius:$r; border-radius: @r; border-radius: $r;} }// "Invoke" the mixin // Invoke the mixin.myDiv { .myDiv { .border-radius(2px+2px); @include border-radius} (2px+2px); }
  24. 24. Mixin: CSS Output.myDiv { -moz-border-radius: 4px; -o-border-radius: 4px; -khtml-border-radius: 4px; -webkit-border-radius:4px; border-radius: 4px;}
  25. 25. WHAT IT ADDS?!@!
  26. 26. 2px + 2px = 4px
  27. 27. Lighten / Darkens// lesslightness (@color, 10%);darkness (@color, 10%);// scss@include lighten($color, 10%);@include darken($color, 10%);
  28. 28. Sass project filesRandom Live Demonstration Time...- Demo2 - What is a project file- Demo3 - Creating a project with compass
  29. 29. Frameworks
  30. 30. Less Frameworks● Bootstrap http://twitter.github.com/bootstrap/● Centage http://centage.peruste.net/
  31. 31. Sass Frameworks● Compass - http://compass-style.org/● Bourbon - http://thoughtbot.com/bourbon/● Foundation - https://github. com/zurb/foundation
  32. 32. What is compass?● sass mixin library● sass meta framework● reduce low level tasksHow do i install this?● Install with a rubygem $ gem install compass
  33. 33. Compass Example: Opacity @import "compass/css3/opacity" div.box { $opacity: .9; opacity($opacity); }
  34. 34. Compass Example: Opacitydiv.box { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=90); opacity: 0.9;}
  35. 35. Compass Example: url helpersdiv.box { background: image-url(lolcat-bg.jpg);}
  36. 36. Compass Example: url helpersdiv.box { background: sites/all/themes/foo/images /lolcat-bg.jpg?4324343;}
  37. 37. Learn moreLess● http://lesscss.org/● http://leafo.net/lessphp/docs/Sass● http://sass-lang.com/● http://sass-lang.com/docs/yardoc/file. SASS_REFERENCE.htmlCompass● http://compass-style.org/
  38. 38. Questions?
  39. 39. Questions?Arial 48pt. Google Powerpoint
  40. 40. Questions?
  41. 41. Thanks! Slides:http://goo.gl/71wK5

×