Dallas Drupal Days 2012

Introduction to css preprocessors.

http://hire.chrisjlee.net

Transcript

1. Introduction to Less / Sass / Compass Presented by Chris Lee @levelten_chris
2. Prerequisites • Strong understanding of CSS • Familiarity with control structures, functions, variables • Lazy Desire to be more Efficient • Familiarity CSS3 • Interest in Theming
3. 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!
4. Less / Sass / Compass CSS
5. 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!
6. Gaining Front End Performance • Reduce HTTP Number of Requests • Reduce, reuse, and recycle css • Compress assets
7. Demonstration: Variables Create a variable file using sass open "demo1"
8. 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!
9. 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
10. Method 2: Command Line Processors • Node js $ npm install less $ sudo apt-get install node-less • ruby gem $ gem install sass $ gem install compass
11. Method 3: Client Side GUIs SimpLess Mac / Win http: //wearekiss. com/simpless
12. Method 3: Client Side GUIs Scout (mac) http://mhs. github. com/scout-app/
13. Method 3: Client Side GUIs Compass.app Mac / win / linux http://compass. handlino.com/
14. How does one pick a preprocessor? • Get Excited! Dive in. • Figure out workflow
15. Syntax
16. Differences between Less / Sass? • Very little differences • Small syntax issues • Workflow • Frameworks / Library advantages
17. Introductory Preprocessor Concepts • Nested • Mixins • Control Structures • Importing
18. 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; } }
19. 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);
20. 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
21. Mixin TLDR;
22. 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; }
23. 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); }
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. WHAT IT ADDS?!@!
26. 2px + 2px = 4px
27. Lighten / Darkens // less lightness (@color, 10%); darkness (@color, 10%); // scss @include lighten($color, 10%); @include darken($color, 10%);
28. Sass project files Random Live Demonstration Time... - Demo2 - What is a project file - Demo3 - Creating a project with compass
29. Frameworks
30. Less Frameworks • Bootstrap http://twitter.github.com/bootstrap/ • Centage http://centage.peruste.net/
31. Sass Frameworks • Compass - http://compass-style.org/ • Bourbon - http://thoughtbot.com/bourbon/ • Foundation - https://github. com/zurb/foundation
32. 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
33. Compass Example: Opacity @import "compass/css3/opacity" div.box { $opacity: .9; opacity($opacity); }
34. Compass Example: Opacity div.box { filter: progid:DXImageTransform.Microsoft. Alpha(Opacity=90); opacity: 0.9; }
35. Compass Example: url helpers div.box { background: image-url('lolcat-bg.jpg'); }
36. Compass Example: url helpers div.box { background: 'sites/all/themes/foo/images /lolcat-bg.jpg?4324343'; }
37. 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/
38. Questions?
39. Questions? Arial 48pt. Google Powerpoint
40. Questions?
41. Thanks! Slides: http://goo.gl/71wK5