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

1,730

Published on

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,730
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
51
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×