Dallas Drupal Days 2012 - Introduction to less sass-compass

  • 1,550 views
Uploaded on

 

More in: Technology
  • 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
1,550
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
45
Comments
0
Likes
3

Embeds 0

No embeds

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