css preprocessors with an introduction to less/sass

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

1

CSS Preprocessors & Intro to Sass and Less


2

Mark Aplet

@visual28 [email protected]

Senior UI/UX Designer at SymSoft Solution


3

CSS Shortcomings


4

CSS Shortcomings

No VariablesYou can wait…But it might take a while.

A looonnng while…


5

CSS Shortcomings

Not DRY• Less maintainable

• Duplicate code.


6

CSS Shortcomings

Difficult for distributed teams Separate files add extra http requests

• @import anyone?

Frequent version control conflicts Separate build tool to concat


7

Preprocessor Languages

Less, Sass, Stylus• It’s not a whole new language rather new features that you can

add to your css.


8

Benefits of Processed CSS

Variables @imports (concatenation) Minification Nesting Extends Mixins (functions) Loops Math Color Manipulation


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

Misconceptions

But only for testing But why?

• Slow

• Better tools available

I can run Less client side – TRUE (Sort of)


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

Less vs 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

Do I have to use the cmd line?

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

Avoiding the Command Line


15

GUI Tools

CodeKit, PrePros, Crunchapp, Scout, Koala, Compassapp, Lessapp, and more

Prepros KoalaCodekit


16

Why Command Line?

Ability to extend your workflow beyond just css• JavaScript

• Image Optimization & Sprites sheets

• Web font creation

• Linting

• Live Reload

• FTP

• SVN & GIT


17

Why Command Line?

Even better with task runners like Grunt or Gulp Simplified Workflow Collaboration


18

Semantics vs 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

InstallationLots of options depending on OS and tools

$npm install -g less

$gem install sass

$npm install


20

Variables


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

@Imports

Partials allow you to break code up into manageable chunks

@import "variables.less";

Same syntax for Sass


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

Nesting

Good for creating specificity Bad for creating specificity Keep it flat!


25

Nesting


26

Mixins

Similar to a function Many built in mixins Create your own custom mixins


27

Built in 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

Custom Mixins


29

Mixins vs Extends

Mixins duplicate css Extends merge selectors


30

Sass Extend


31

Less Extend


32

Loops


33

Flow Control


34

Any Questions?In-depth discussion at a future meeting


36

Mo-betta


37

Grunt.js

Helps to automate repetitive tasks Workflow tool Not Required – Is helpful Helps you collaborate with teams

What the heck is it?


38

Installing Grunt.js

$ npm install -g grunt-cli


39

Grunt Tasks

It’s just JavaScript User created tasks Multiple tasks for different scenarios

• Watch, Production, Development, Build, Optimize

A task may run several sub-tasks


40

Live Demo

css preprocessors with an introduction to less/sass

Internet