Dallas Drupal Days 2012 - Introduction to less sass-compass
- 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. CSS Less / Sass / Compass
- 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 // sass / scss // @file style.less.css // @file style.scss body { body { .header { .header { background: #fc0; background: #fc0; } } } }
- 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. 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 // 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. 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. 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