A great presentation by Brady Sammons. Presented at the Tech-in-motion SF july meetup. This presentation was not created or compiled by me. I am just sharing it on behalf of the community.

1. { CSS Preprocessing }
With LESS & Sass
By: Brady Sammons
bradysammons.com | brady@brightroll.com | @soulrider911

2. { Terms }

3. {Preprocessing}
Preprocessing is a method of extending the feature set of CSS by first writing the
style sheets in a preprocessed language, then compiling the code to pure CSS syntax
that we are all use to.

4. { Compile }
A compiler is a computer program(s) that transforms source code written in a
programming language (the source language) into another computer language (the
target language).

5. { Sass }
Syntactically Awesome Stylesheets - Sass is an extension of CSS, adding nested rules,
variables, mixins, operators, selector inheritance, and more. It’s translated to well-
formatted, standard CSS using the command line tool or a web-framework plugin. Sass is
based in Ruby
Designed by Hampton Catlin developed by Nathan Weizenbaum – 2007

6. { LESS }
Write less do more - Less language provides the following mechanisms: variables, nesting,
mixins, operators and functions; then converted into standard css via javascript or an
application. Less is based in javascript.
Designed by Alexis Sellier 2009, was influenced by SASS.

7. { How Does it Work? }

8. { The Machine }
LESS / SASS Metalanguage Document Ruby / JS Output CSS
MR. COMPILER

9. { Who Cares? }

10. { A Few Reasons Why }
• It Saves time
• This is what CSS should have been to begin with
• Makes your CSS less repetitive (DRY)
• Easier to maintain
• Easier to read
• Make your websites look better
• More fun to code
• Extendable - Compass, LessHat

11. { Possible Deterrents }
• Change of workflow
• Another syntax to learn
• Rely’s upon a compiler software
• Harder to debug
• Less documentation that CSS alone
• Don’t know how to set it up

12. { Differences }
@ LESS VS $ Sass

13. { Example }
Sass $
$ltgreen: #79c777;
#header {
Font-Size: 1.1em;
h2 {
color: $ltgreen;
}
}
LESS @
@ltgreen: #79c777;
#header {
Font-Size: 1.1em;
h2 {
color: @ltgreen;
}
}
#header {
Font-Size: 1.1em;
}
#header h2 {
color: #79c777;
}
CSS (compiled)

14. { Comparison }
SASS ($)LESS (@)
Operators
#header{
width: (@headerW - 50) * 2;
}
#header{
width: ($headerW - 50) * 2;
}
Frameworks
Language Base
LESSHat, LESS ELEMENTS
Javascript (originally Ruby)
COMPASS
Ruby
Functions lighten(#ff0000, 10%);
Saturate(#ff0000, 20%);
lighten(#ff0000, 10%);
Saturate(#ff0000, 20%);
Mixins
@mixin {
width: 50%;
: ;
}
{
width: 50%;
: ;
}
Parametric Mixins
( px){
: ;
: ;
: ;
}
( px){
: ;
: ;
: ;
}
Variables @plainRed: #ff0000;
: #bce7f3;
$plainRed: #ff0000;
: #bce7f3;

15. { Compiling Apps }
LESS SASSBOTH
Less.app Codekit
Fire.app
Scout
Livereload

16. { Some Live Code }

17. { Game On }