The document provides an overview of CSS preprocessors like Sass and Less, highlighting their benefits such as variables, nesting, and mixins, while also addressing the shortcomings of traditional CSS. It discusses common misconceptions about these preprocessors and compares their features, along with tools that enhance workflow like Grunt. Additionally, it covers installation instructions and explores advanced features such as custom mixins, loops, and command-line usage.

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