An Introduction to LESS CSS

A presentation by Mannie Schumpert (@mannieschumpert) on LESS CSS and how it can improve a designer or developer's workflow. Presented at the Charleston WordPress User Group (@wpchs)

Transcript

1. An Introduction to LESS CSS More efficient development utilizing a stylesheet pre- processor.
2. schmprt.com/less View links to resources and tools @:
3. A dynamic stylesheet language that extends CSS with variables, “mixins,” operations, and functions. WHAT IS LESS?
4. 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
5. 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
6. 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
7. USING LESS TO INCREASE ORGANIZATION AND READABILITY • Nested Rules
8. 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
10. 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
11. 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)