What are css preprocessors? How do you get started? Why do you want to use one? These are all questions I asked when I first got started with Less and Sass.

1. 3835 North Freeway Blvd., Suite 110 • Sacramento, CA 95834 • Phone: (916) 567-1740 • Fax: (916) 290-9067 • symsoftsolutions.com
1
CSS Preprocessors
&IntrotoSassandLess

2. 3835 North Freeway Blvd., Suite 110 • Sacramento, CA 95834 • Phone: (916) 567-1740 • Fax: (916) 290-9067 • symsoftsolutions.com
2
Mark Aplet
 @visual28
 mark@visual28.com
Senior UI/UX Designer at SymSoft Solution

3. 3835 North Freeway Blvd., Suite 110 • Sacramento, CA 95834 • Phone: (916) 567-1740 • Fax: (916) 290-9067 • symsoftsolutions.com
3
CSSShortcomings

4. 3835 North Freeway Blvd., Suite 110 • Sacramento, CA 95834 • Phone: (916) 567-1740 • Fax: (916) 290-9067 • symsoftsolutions.com
4
CSSShortcomings
 No Variables
You can wait…
But it might take a while.
A looonnng while…

5. 3835 North Freeway Blvd., Suite 110 • Sacramento, CA 95834 • Phone: (916) 567-1740 • Fax: (916) 290-9067 • symsoftsolutions.com
5
CSSShortcomings
 Not DRY
• Less maintainable
• Duplicate code.

6. 3835 North Freeway Blvd., Suite 110 • Sacramento, CA 95834 • Phone: (916) 567-1740 • Fax: (916) 290-9067 • symsoftsolutions.com
6
CSSShortcomings
 Difficult for distributed teams
 Separate files add extra http requests
• @import anyone?
 Frequent version control conflicts
 Separate build tool to concat

7. 3835 North Freeway Blvd., Suite 110 • Sacramento, CA 95834 • Phone: (916) 567-1740 • Fax: (916) 290-9067 • symsoftsolutions.com
7
PreprocessorLanguages
 Less, Sass, Stylus
• It’s not a whole new language rather new features that you can
add to your css.

8. 3835 North Freeway Blvd., Suite 110 • Sacramento, CA 95834 • Phone: (916) 567-1740 • Fax: (916) 290-9067 • symsoftsolutions.com
8
BenefitsofProcessedCSS
 Variables
 @imports (concatenation)
 Minification
 Nesting
 Extends
 Mixins (functions)
 Loops
 Math
 Color Manipulation

9. 3835 North Freeway Blvd., Suite 110 • Sacramento, CA 95834 • Phone: (916) 567-1740 • Fax: (916) 290-9067 • symsoftsolutions.com
9
Misconceptions
 Sass is written in Ruby
 Less & Styles is JavaScript
• You need them on your
development machine only
I need node or ruby on my server - FALSE

10. 3835 North Freeway Blvd., Suite 110 • Sacramento, CA 95834 • Phone: (916) 567-1740 • Fax: (916) 290-9067 • symsoftsolutions.com
10
Misconceptions
 But only for testing
 But why?
• Slow
• Better tools available
I can run Less client side – TRUE (Sort of)

11. 3835 North Freeway Blvd., Suite 110 • Sacramento, CA 95834 • Phone: (916) 567-1740 • Fax: (916) 290-9067 • symsoftsolutions.com
11
Misconceptions
 Ruby and Node are easy to install on any platform
 Ruby pre-installed on macs
 Node installers makes it easy
• (*windows might not create the npm folder)
 Linux is easy with apt-get install
It’s hard to install - FALSE*

12. 3835 North Freeway Blvd., Suite 110 • Sacramento, CA 95834 • Phone: (916) 567-1740 • Fax: (916) 290-9067 • symsoftsolutions.com
12
Lessvs Sass
 No short answer for that
 Bootstrap uses Less and Sass version
 Foundation uses Sass
 IMO Sass is more robust but less is easier to get started
with
 Sass has Compass - it is the bomb!
 Less was more performant, but now Sass has caching
Which is best?

13. 3835 North Freeway Blvd., Suite 110 • Sacramento, CA 95834 • Phone: (916) 567-1740 • Fax: (916) 290-9067 • symsoftsolutions.com
13
DoI havetousethe cmdline?
 It is possible to avoid the command line
 Many well built GUI’s
 Command line tools = mo-betta!
• More power & flexibility
• Collaborate effectivly
No, but you will probably want to.

14. 3835 North Freeway Blvd., Suite 110 • Sacramento, CA 95834 • Phone: (916) 567-1740 • Fax: (916) 290-9067 • symsoftsolutions.com
14
Avoidingthe CommandLine

15. 3835 North Freeway Blvd., Suite 110 • Sacramento, CA 95834 • Phone: (916) 567-1740 • Fax: (916) 290-9067 • symsoftsolutions.com
15
GUITools
 CodeKit, PrePros, Crunchapp, Scout, Koala, Compassapp,
Lessapp, and more
Prepros KoalaCodekit

16. 3835 North Freeway Blvd., Suite 110 • Sacramento, CA 95834 • Phone: (916) 567-1740 • Fax: (916) 290-9067 • symsoftsolutions.com
16
Why CommandLine?
 Ability to extend your workflow beyond just css
• JavaScript
• Image Optimization & Sprites sheets
• Web font creation
• Linting
• Live Reload
• FTP
• SVN & GIT

17. 3835 North Freeway Blvd., Suite 110 • Sacramento, CA 95834 • Phone: (916) 567-1740 • Fax: (916) 290-9067 • symsoftsolutions.com
17
Why CommandLine?
 Even better with task runners like Grunt or Gulp
 Simplified Workflow
 Collaboration

18. 3835 North Freeway Blvd., Suite 110 • Sacramento, CA 95834 • Phone: (916) 567-1740 • Fax: (916) 290-9067 • symsoftsolutions.com
18
Semanticsvs OOCSS
 OOCSS = CSS light but DOM heavy
 Semantic = DOM light but CSS heavy
 Mixins & Extends help narrow the gap
• Not perfect
• Future versions will get better

19. 3835 North Freeway Blvd., Suite 110 • Sacramento, CA 95834 • Phone: (916) 567-1740 • Fax: (916) 290-9067 • symsoftsolutions.com
19
Installation
Lots of options depending on OS and tools
$npm install -g less
$gem install sass
$npm install

20. 3835 North Freeway Blvd., Suite 110 • Sacramento, CA 95834 • Phone: (916) 567-1740 • Fax: (916) 290-9067 • symsoftsolutions.com
20
Variables

21. 3835 North Freeway Blvd., Suite 110 • Sacramento, CA 95834 • Phone: (916) 567-1740 • Fax: (916) 290-9067 • symsoftsolutions.com
21
Variables
 Variable can hold variables
• @brand-primary: @color1;
 Variables can be many things
• @img-path: “../img”;
• @font-size: 1em;
• @link-hover: darken(@color1, 8%);

22. 3835 North Freeway Blvd., Suite 110 • Sacramento, CA 95834 • Phone: (916) 567-1740 • Fax: (916) 290-9067 • symsoftsolutions.com
22
@Imports
 Partials allow you to break code up into manageable
chunks
@import "variables.less";
Same syntax for Sass

23. 3835 North Freeway Blvd., Suite 110 • Sacramento, CA 95834 • Phone: (916) 567-1740 • Fax: (916) 290-9067 • symsoftsolutions.com
23
Concatenation& Minification
 Combines all the partials into a single file
 Can remove excess whitespace
 Can remove comments
 Grunt can make this process even simpler

24. 3835 North Freeway Blvd., Suite 110 • Sacramento, CA 95834 • Phone: (916) 567-1740 • Fax: (916) 290-9067 • symsoftsolutions.com
24
Nesting
 Good for creating specificity
 Bad for creating specificity
 Keep it flat!

25. 3835 North Freeway Blvd., Suite 110 • Sacramento, CA 95834 • Phone: (916) 567-1740 • Fax: (916) 290-9067 • symsoftsolutions.com
25
Nesting

26. 3835 North Freeway Blvd., Suite 110 • Sacramento, CA 95834 • Phone: (916) 567-1740 • Fax: (916) 290-9067 • symsoftsolutions.com
26
Mixins
 Similar to a function
 Many built in mixins
 Create your own custom mixins

27. 3835 North Freeway Blvd., Suite 110 • Sacramento, CA 95834 • Phone: (916) 567-1740 • Fax: (916) 290-9067 • symsoftsolutions.com
27
Builtin Mixins
 lighten (@color1, 8%) — darken(@color1, 8%)
 image-size("file.png");
 data-uri(‘image.jpg');
 screen(@color1, @color2)
• multiply, hardlight, softlight, difference, overlay, mix, fade, spin,
grayscale, saturate, etc

28. 3835 North Freeway Blvd., Suite 110 • Sacramento, CA 95834 • Phone: (916) 567-1740 • Fax: (916) 290-9067 • symsoftsolutions.com
28
CustomMixins

29. 3835 North Freeway Blvd., Suite 110 • Sacramento, CA 95834 • Phone: (916) 567-1740 • Fax: (916) 290-9067 • symsoftsolutions.com
29
Mixinsvs Extends
 Mixins duplicate css
 Extends merge selectors

30. 3835 North Freeway Blvd., Suite 110 • Sacramento, CA 95834 • Phone: (916) 567-1740 • Fax: (916) 290-9067 • symsoftsolutions.com
30
Sass Extend

31. 3835 North Freeway Blvd., Suite 110 • Sacramento, CA 95834 • Phone: (916) 567-1740 • Fax: (916) 290-9067 • symsoftsolutions.com
31
LessExtend

32. 3835 North Freeway Blvd., Suite 110 • Sacramento, CA 95834 • Phone: (916) 567-1740 • Fax: (916) 290-9067 • symsoftsolutions.com
32
Loops

33. 3835 North Freeway Blvd., Suite 110 • Sacramento, CA 95834 • Phone: (916) 567-1740 • Fax: (916) 290-9067 • symsoftsolutions.com
33
FlowControl

34. 3835 North Freeway Blvd., Suite 110 • Sacramento, CA 95834 • Phone: (916) 567-1740 • Fax: (916) 290-9067 • symsoftsolutions.com
34
Any Questions?
In-depth discussion at a future meeting

35. 3835 North Freeway Blvd., Suite 110 • Sacramento, CA 95834 • Phone: (916) 567-1740 • Fax: (916) 290-9067 • symsoftsolutions.com
36
Mo-betta

36. 3835 North Freeway Blvd., Suite 110 • Sacramento, CA 95834 • Phone: (916) 567-1740 • Fax: (916) 290-9067 • symsoftsolutions.com
37
Grunt.js
 Helps to automate repetitive tasks
 Workflow tool
 Not Required – Is helpful
 Helps you collaborate with teams
What the heck is it?

37. 3835 North Freeway Blvd., Suite 110 • Sacramento, CA 95834 • Phone: (916) 567-1740 • Fax: (916) 290-9067 • symsoftsolutions.com
38
InstallingGrunt.js
 $ npm install -g grunt-cli

38. 3835 North Freeway Blvd., Suite 110 • Sacramento, CA 95834 • Phone: (916) 567-1740 • Fax: (916) 290-9067 • symsoftsolutions.com
39
GruntTasks
 It’s just JavaScript
 User created tasks
 Multiple tasks for different scenarios
• Watch, Production, Development, Build, Optimize
 A task may run several sub-tasks

39. 3835 North Freeway Blvd., Suite 110 • Sacramento, CA 95834 • Phone: (916) 567-1740 • Fax: (916) 290-9067 • symsoftsolutions.com
40
LiveDemo