This document discusses the Less stylesheet language. It begins with an agenda that covers what Less is, why it's useful, its features, tools for using Less, and a real-world example. Less extends CSS with dynamic behaviors like variables, mixins, functions and more. It allows for better organization of CSS and reduces development time.

2. Agenda
1. What? 4. Tools
2. Why? 5. Real example
3. Features 6. Browser Tab Reloader.
• Live.js

3.  What is less ?
 Dynamic stylesheet language (Pre-procesor of css).
 Same syntax as css.
 Alexis Sellier.
 Ruby ( *js - nodejs – php - .net ).

4.  Why less ?
 LESS extends CSS with dynamic behavior such as
variables, mixins, operations and functions and more.
 Reduce development and maintanance time.
 Amplified results.
 More intuitive css.
 You can generate one stylesheet file.
 Use javascritp with less.
 Better organization.

5.  Better Organization

6.  Features -- Variables

7. Features -- Nested Rules

8.  Features -- Mixins

9. Features -- Functions & Operations

10.  Features -- Color Functions
lighten(@color, 10%); // return a color which is 10% *lighter* than @color
darken(@color, 10%); // return a color which is 10% *darker* than @color
saturate(@color, 10%); // return a color 10% *more* saturated than @color
desaturate(@color, 10%); // return a color 10% *less* saturated than @color
fadein(@color, 10%); // return a color 10% *less* transparent than @color
fadeout(@color, 10%); // return a color 10% *more* transparent than @color
fade(@color, 50%); // return @color with 50% transparency
spin(@color, 10); // return a color with a 10 degree larger in hue than @color
spin(@color, -10); // return a color with a 10 degree smaller hue than @color
mix(@color1, @color2); // return a mix of @color1 and @color2

11.  Features -- Functions
Extract information:
hue(@color); // returns the `hue` channel of @color
saturation(@color); // returns the `saturation` channel of @color
lightness(@color); // returns the 'lightness' channel of @color
alpha(@color); // returns the 'alpha' channel of @color
Example:
@new: hsl(hue(@old), 45%, 90%);

12.  Features -- Namespaces and Scope

13.  Features -- Namespaces and Scope

14.  Features -- Parametric Mixins

15.  Features -- Guards

16.  Tools
Windows :
SimpleLess osx - linux Text Editor:
winless.org sublime text
Eclipse plugin for less osx - linux Eclipse WTP
Textmate
Mac:
Less.app
Adobe Air:
Online: Crunch
http://lesscss.org
http://leafo.net/lessphp/#demo
http://betabong.com/play/liveless/

17.  Real Example
Process CM Less
Process CM

18.  The End