An Introduction to LESS CSS More efficient development utilizing a stylesheet pre- processor. 

schmprt.com/less View links to resources and tools @: 

A dynamic stylesheet language that extends CSS with variables, “mixins,” operations, and functions. WHAT IS LESS? 

Decrease how much CSS you have to write using: • Variables • Mixins • Functions and Operations Increase readability and organization of CSS using: • Imports • Nested Rules • Comments BENEFITS OF USING LESS 

The language • completely compatible with CSS WORKING WITH LESS LESS on a live site • client-side with less.js • server-side with node.js Local development with LESS • with the command-line • with CodeKit - for Mac • with SimpLESS - PC or Mac 

USING LESS TO INCREASE ORGANIZATION AND READABILITY • Imports style.less: @import ‘reset.less’; @import ‘main.less’; @import ‘forms.less’; @import ‘comments.less;’ @import ‘queries.less’; style.css 

USING LESS TO INCREASE ORGANIZATION AND READABILITY • Nested Rules 

USING LESS TO DECREASE HOW MUCH CODE YOU WRITE 1.Variables a.Set site-wide options like color • Ex. @primary, @accent, @bg 2.Mixins a.Insert classes into other selectors b.Easily re-use common style declarations • Ex. .dashed, .sans, .rounded 3.Parametric Mixins a.Death to vendor prefixes!! 4.Functions and Operations a.Color functions 

No content

USING LESS TO DECREASE HOW MUCH CODE YOU WRITE 1.Variables a.Set site-wide options like color • Ex. @primary, @accent, @bg 2.Mixins a.Insert classes into other selectors b.Easily re-use common style declarations • Ex. .dashed, .sans, .rounded 3.Parametric Mixins a.Death to vendor prefixes!! 4.Functions and Operations a.Color functions 

OTHER FEATURES • Pattern matching and guard expressions • String interpolation • Escaping • JavaScript evaluation (which I haven’t used yet and hurt my brain just thinking about)