Dallas Drupal Days 2012  - Introduction to less sass-compass
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
2,014
On Slideshare
1,963
From Embeds
51
Number of Embeds
1

Actions

Shares
Downloads
45
Comments
0
Likes
3

Embeds 51

http://hire.chrisjlee.net 51

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Introduction toLess / Sass / CompassPresented byChris 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. 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. CSSLess / 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● Its easy!
  • 6. Gaining Front End Performance● Reduce HTTP Number of Requests● Reduce, reuse, and recycle css● Compress assets
  • 7. Demonstration: VariablesCreate a variable file using sassopen "demo1"
  • 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. 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. Method 2: Command LineProcessors● Node js $ npm install less $ sudo apt-get install node-less● ruby gem $ gem install sass $ gem install compass
  • 11. Method 3: Client Side GUIsSimpLessMac / Winhttp://wearekiss.com/simpless
  • 12. Method 3: Client Side GUIsScout (mac)http://mhs.github.com/scout-app/
  • 13. Method 3: Client Side GUIsCompass.appMac / win /linuxhttp://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. IntroductoryPreprocessor Concepts● Nested● Mixins● Control Structures● Importing
  • 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. 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 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. 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// lesslightness (@color, 10%);darkness (@color, 10%);// scss@include lighten($color, 10%);@include darken($color, 10%);
  • 28. Sass project filesRandom 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 tasksHow 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: Opacitydiv.box { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=90); opacity: 0.9;}
  • 35. Compass Example: url helpersdiv.box { background: image-url(lolcat-bg.jpg);}
  • 36. Compass Example: url helpersdiv.box { background: sites/all/themes/foo/images /lolcat-bg.jpg?4324343;}
  • 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. Questions?
  • 39. Questions?Arial 48pt. Google Powerpoint
  • 40. Questions?
  • 41. Thanks! Slides:http://goo.gl/71wK5