This document provides an introduction to Less, Sass, and Compass, which are CSS preprocessors. It discusses prerequisites including a strong understanding of CSS and familiarity with control structures and variables. The goals are to understand the high-level purpose of preprocessing languages and learn how to get started using them. Methods for using Less, Sass, and Compass with Drupal are presented, including modules and command line tools. Key concepts demonstrated include variables, mixins, importing, and frameworks like Compass. The document encourages questions and provides additional learning resources.

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