Presentation on CSS Preprocessors focusing on SASS/SCSS and LESS. From Preprocesser Madness event at: http://www.meetup.com/socalwdd/events/66952482/

1. CSS Preprocesser
Madness
LESS/SCSS/Compass/Bootstrap

2. About Us
Mario Noble
Charles Mata

3. Why Madness?
Because you may become crazy for it.
Or over it.
Or maybe just watching this "Powerpoint" will
drive you insane.

4. Preprocessors
AKA - The "People's Patch"
Our alternative to the cross browser wars.
At least for the time being...

5. Learn CSS and good practices first
Preprocessors are not a replacement for good
coding, planning and design.

6. What is preprocessing?
Preprocessing is essentially creating the
equivalent of a Photoshop file or a suped up
mailing template for your css.
It gives you added umph to your work.
Sometimes making it easier.
Occasionally it might be overkill.

7. Why do it?
Do you like to type the same thing over and over?
Do you enjoy trying to hunt down a tiny bit of code
somewhere in thousands of lines of code and then using
find and replace hoping it'll work?
No?
Use preprocessing.

8. Most of all - DRY practices
Don't Repeat Yourself

9. Other reasons
● CSS 3 browser prefixes
● Responsive design
● Other people are using it, so you want to
have a clue.
● Efficiency
● Better organization
● Faster sites and better SEO

10. Disadvantages
● Learning curve
● Team Maintenance
● Yet another layer
● Code bloat
● Selectoritis

11. Methods and Approaches
● SASS/SCSS
● LESS
● Stylus
● cleverCSS
● cssCrush
● prefixer (http://prefixr.com/)
● force browser to interpret PHP as CSS

12. We're going over the two most
popular preprocessors tonight
LESS and SASS/SCSS
We'll be glossing over some stuff in the interest of time and clarity

13. Which is best?

14. Let's go over what they share
Each of them now share most of each others
capabilities with some minor differences in
syntax.
The following examples are from Chris
Eppstein's gits on: https://gist.github.
com/674726
Thanks Chris!

15. Variables (placeholders)
Sass | Less
-----------------+-----------------
$color: red; | @color: red;
div { | div {
color: $color; | color: @color;
} | }
Becomes
div { color: #ff0000; }

16. Nesting (outlining)
Sass | Less
-------------------+-----------------
p { | p {
a { | a {
color: red; | color: red;
&:hover { | &:hover {
color: blue; | color: blue; }
} }
} }
Becomes
p a {color: red;}
p a:hover {color: blue;}

17. Mixins (mini-templates)
Sass | Less
----------------------------------+----------------------------------
@mixin bordered { | .bordered {
border-top: dotted 1px black; | border-top: dotted 1px black;
border-bottom: solid 2px black; | border-bottom: solid 2px black;
} | }
|
#menu a { | #menu a {
@include bordered; | .bordered;
} | }
Becomes
.bordered {
border-top: dotted 1px black;
border-bottom: solid 2px black;
}
#menu a {
border-top: dotted 1px black;
border-bottom: solid 2px black;
}

18. Mixins with arguments
(adverbs/adjectives)
Sass | Less
----------------------------------+----------------------------------
@mixin bordered($width: 2px) { | .bordered(@width: 2px) {
border: $width solid black; | border: @width solid black;
} | }
|
#menu a { | #menu a {
@include bordered(4px); | .bordered(4px);
} | }
Becomes
#menu a {
border: 4px solid #000000;
}

19. Numbers
Sass: Less:
1cm * 1em => 1 cm * em 1cm * 1em => Error
2in * 3in => 6 in * in 2in * 3in => 6in
(1cm / 1em) * 4em => 4cm (1cm / 1em) * 4em
2in + 3cm + 2pc => 3.514in => Error
3in / 2in => 1.5 2in + 3cm + 2pc =>
Error
3in / 2in => 1.5in

20. Imports (Get that there file!)
@import "somefile.less";
@import "somefile";
@import "somefile.scss";
@import "somefile";
@import "somedirectory/somefile.scss";

21. Interpolation (stick it in there)
SCSS style
LESS style
/* style.scss */ @base-url: "http://assets.fnord.com";
$side: top; background-image: url("@{base-url}
/images/bg.png");
$radius: 10px;
Becomes:
.rounded- {
border-#{$side}-radius: $radius; background-image: url("http://assets.fnord.
com/images/bg.png");.someclass {
-moz-border-radius-#{$side}: $radius; color: #333;
-webkit-border-#{$side}-radius: $radius; }
}

22. Escaping (take it literally)
LESS
.class {
filter: ~"ms:alwaysHasItsOwnSyntax.For.
Stuff()";
}
SASS
.class {
filter: #{"'ms:alwaysHasItsOwnSyntax.For.
Stuff()'"};
}
Becomes:
.class {filter: ms:alwaysHasItsOwnSyntax.For.Stuff();}

23. Comments
Both LESS and SCSS use the same comment
structure.
// is a note in the authoring file
/* some note */ is published to the compiled file.

24. @media query tweaking
LESS (for SASS/SCSS replace @ with $ for
Becomes:
variables)
.profile-pic {
@break-small: 320px; float: left;
@break-large: 1200px; width: 250px;
}
@media screen and (max-width:
.profile-pic { 320px) {
float: left; .profile-pic {
width: 250px; width: 100px;
float: none;
@media screen and (max-width: @break-small) { }
width: 100px; }
float: none; @media screen and (min-width:
1200px) {
}
.profile-pic {
@media screen and (min-width: @break-large) { float: right;
float: right; }
} }
}

25. Differences
As with anything, there are advantages and
disadvantages of going with various options.
LESS and SASS are no different.
Or rather they are in some ways...

26. Extra features of SASS/SCSS
● Can properly "extend" other classes.
● True if, for, while and each control directives
(Logic)
● Global scoping of variables
● Compass (sprites)
● Origin line reporting
● Good Rails integration
● Various output styles
● Real functions that return values

27. Extra features of LESS
● Namespacing
● Guards and Pattern Matching
● Easy compile "on the fly" with a single
JavaScript file.
● Variables as constants
● Twitter Bootstrap
● Usual scope practices
● JavaScript evaluation

28. To compile locally or on the server?
Considerations:
Performance
Coordination
Caching
Server install

29. Let's demo some Bootstrap n' Stuff!
Go Charles go!

31. Hands on part!
Let's do LESS first
Get the example material or use your own
http://files.meetup.com/1962521/basicHtmlCss.zip
Get the basic js
http://lesscss.org - bonus points - download twitter bootstrap
Get a complier
Mac OSX http://incident57.com/less/
Windows http://winless.org/
Linux/Mac/PC http://wearekiss.com/simpless
Get an editor or download the code hinters
http://www.sublimetext.com/

32. Already have the LESS stuff?
To install SASS/SCSS
Go here: http://sass-lang.com/tutorial.html
Download the Windows Installer if you're on Windows.
http://rubyinstaller.org/
After that, go to http://compass-style.org/install/
Follow instructions to install both SASS and Compass
Download either Scout
http://mhs.github.com/scout-app/
Compass app is good too. Just paid.
Configure your editor
I recommend SublimeText along with the Package Installer to install
SCSS/LESS code hinting.

33. "Converting" your existing CSS
Really just nests it.
LEAST
http://toki-woki.net/p/least/
SASS
# Convert Sass to SCSS
$ sass-convert style.css style.scss

34. LESS useful tools if using the js to
compile.
After you put this into your files:
<link rel="stylesheet/less" type="text/css" href="
styles.less">
<script src="less.js" type="text/javascript"
></script>
Put this after your file name in the url:
#!watch
Chrome users: --allow-file-access-from-files in
shortcut or use a local server
mac : terminal ; open /Applications/Google
Chrome.app --args --allow-file-access-from-files

35. Compiling
You can use tools or the command line.
SCSS users may need to delve into their
config.rb file or just use the tools.
LESS users might just want to use the tools to
setup publish paths.

36. Let's have fun with
variables
@myvariable or $myvariable

37. Comments
// and /* */

38. Mixins
@mixin mymixin { }
@include mymixin { }
.somemixin { }
.anotherclass { .somemixin }

39. Mixins with parameters
@mixin mymixin($hello);
@include mymixin(10px);
.somemixin(@hello)
.somemixin (10px);

40. Numbers
width: $navbar-width/$items - 10px;
color: @base-color * 3;

41. Interpolation
border-#{$side}-radius: $radius;
border-@{side}-radius: $radius;

42. Gotchas
LESS
Keep your import structure flat.
SCSS
Watch out for imports with .less or not.

43. Congratz!!!!
You has mad skillz nowz!

44. Q&A