22/03/12

LESS

The Dynamic Stylesheet language

Variables
Variables allow you to specify widely used values in a single place, and then re-use them throughout the style sheet, making global changes as easy as changing one line of code.
/ LS / ES / Cmie CS* * opld S / @oo:#D2F clr 496; #edr{ hae #edr{ hae clr #D2F oo: 496; clr @oo; oo: clr h { 2 h { 2 clr #D2F oo: 496; clr @oo; oo: clr

Mi ins
Mixins allow you to embed all the properties of a class into another class by simply including the class name as one of its properties. It s just like variables, but for whole classes. Mixins can also behave like functions, and take arguments, as seen in the example bellow.
/ LS / ES / Cmie CS* * opld S / .one-onr (rdu:5x { ruddcres @ais p) bre-ais @ais odrrdu: rdu; #edr{ hae -ektbre-ais @ais wbi-odrrdu: rdu; bre-ais 5x odrrdu: p; -o-odrrdu:@ais mzbre-ais rdu; -ektbre-ais 5x wbi-odrrdu: p; -o-odrrdu:5x mzbre-ais p; #edr{ hae .one-onr; ruddcres #otr{ foe .one-onr(0x; ruddcres1p) #otr{ foe bre-ais 1p; odrrdu: 0x -ektbre-ais 1p; wbi-odrrdu: 0x -o-odrrdu:1p; mzbre-ais 0x

Nested Rules
Rather than constructing long selector names to specify inheritance, in Less you can simply nest selectors inside other selectors. This makes inheritance clear and style sheets shorter.
/ Cmie CS* * opld S / / LS / ES #edr{ hae h { 1 fn-ie 2p; otsz: 6x fn-egt bl; otwih: od p{fn-ie 1p; otsz: 2x a{tx-eoain nn; etdcrto: oe &hvr{bre-it:1x :oe odrwdh p #edrh { hae 1 fn-ie 2p; otsz: 6x fn-egt bl; otwih: od #edrp{ hae fn-ie 1p; otsz: 2x #edrpa{ hae tx-eoain nn; etdcrto: oe #edrpahvr{ hae :oe bre-it:1x odrwdh p;
file:///D:/Matheus/Desktop/less.html 1/13

22/03/12

LESS

The Dynamic Stylesheet language

Functions & Operations

Are some elements in your style sheet proportional to other elements? Operations let you add, subtract, divide and multiply property values and colors, giving you the power to create complex relationships between properties. Functions map one-to-one with JavaScript code, allowing you to manipulate values however you want.
/ LS / ES @h-odr 1x tebre: p; @aeclr #1; bs-oo: 11 @e: rd #420 821; #edr{ hae clr @aeclr*3 oo: bs-oo ; bre-et @h-odr odrlf: tebre; bre-ih:@h-odr*2 odrrgt tebre ; / Cmie CS* * opld S / #edr{ hae clr #3; oo: 33 bre-et 1x odrlf: p; bre-ih:2x odrrgt p; #otr{ foe clr #141 oo: 141; bre-oo:#d77 odrclr 721;

#otr{ foe clr @aeclr+#030 oo: bs-oo 030; bre-oo:dstrt(rd 1%; odrclr eauae@e, 0)

Client-side usage
Link your . e sstylesheets with the r lset to s y e h e / e s ls e t l s e t l s :
<ikrl"tlsetls"tp=tx/s"he=sye.es> ln e=syehe/es ye"etcs rf"tlsls"

Then download l s . sfrom the top of the page, and include it in the < e d element of your page, like so: esj ha>
<citsc"esj"tp=tx/aacit>/cit srp r=ls.s ye"etjvsrp"<srp>

Make sure you include your stylesheets before the script.

Watch mode
Watch mode is a client-side feature which enables your styles to refresh automatically as they are changed. To enable it, append # w t h to the browser URL, then refresh the page. Alternatively, you can run !ac l s . a c ( from the console. eswth)

Server-side usage Installation

The easiest way to install LESS on the server, is via npm, the node package manager, as so:
$nmisalls p ntl es

Use
file:///D:/Matheus/Desktop/less.html 2/13

22/03/12

LESS

The Dynamic Stylesheet language

Once installed, you can invoke the compiler from node, as such:
vrls =rqie'es) a es eur(ls'; ls.edr'cas{wdh 1+1 ' fnto (,cs { esrne(.ls it: , ucin e s) cnoelgcs; osl.o(s) ) ;

which will output

.ls { cas wdh 2 it: ;

you may also manually invoke the parser and compiler:

vrpre =nwls.asr; a asr e(esPre) pre.as(.ls {wdh 1+1 ' fnto (r,te){ asrpre'cas it: , ucin er re i (r){rtr cnoeerrer f er eun osl.ro(r) cnoelgte.oS() osl.o(retCS); ) ;

Configuration
You may pass some options to the compiler:
vrpre =nwls.asr( a asr e(esPre){ pts [.,'/i',/ Seiysac ptsfr@motdrcie ah: '' .lb] / pcf erh ah o ipr ietvs flnm:'tl.es / Seiyaflnm,frbte errmsae ieae syels' / pcf ieae o etr ro esgs ) ; pre.as(.ls {wdh 1+1 ' fnto (,te){ asrpre'cas it: , ucin e re te.oS( cmrs:tu ) / Mnf CSotu retCS{ opes re ; / iiy S upt ) ;

Command-line usage
Less comes with a binary, which lets you invoke the compiler from the command-line, as such:
$lscsye.es es tlsls

This will output the compiled CSS to s d u , you may then redirect it to a file of your choice: tot
$lscsye.es>sye.s es tlsls tlscs

To output minified CSS, simply pass the - option. If you would like more involved minification, the YUI CSS x Compressor is also available with the - y i c m r s option. -u-opes

The Language
As an extension to CSS, LESS is not only backwards compatible with CSS, but the extra features it adds use existing CSS syntax. This makes learning LESS a bree e, and if in doubt, lets you fall back to CSS.

Variables
file:///D:/Matheus/Desktop/less.html 3/13

22/03/12

LESS

The Dynamic Stylesheet language

These are pretty self-explanatory:

@iebu:#B3D nc-le 58A; @ih-le @iebu +#1; lgtbu: nc-le 11 #edr{clr @ih-le hae oo: lgtbu;

Outputs:
#edr{clr #c4e hae oo: 69b;

It is also possible to define variables with a variable name:

@nr:" a fod" fod I m nr.; @a:'nr' vr fod; cnet @vr otn: @a;

Which compiles to:

cnet " a fod" otn: I m nr.;

Note that variables in LESS are actually constants in that they can only be defined once.

Mi ins
In LESS, it is possible to include a bunch of properties from one ruleset into another ruleset. So say we have the following class:
.odrd{ bree bre-o:dte 1xbak odrtp otd p lc; bre-otm sld2xbak odrbto: oi p lc;

And we want to use these properties inside other rulesets. Well, we just have to drop in the name of the class in any ruleset we want to include its properties, like so:
#eua{ mn clr #1; oo: 11 .odrd bree; .ota{ ps clr rd oo: e; .odrd bree;

The properties of the . o d r dclass will now appear in both # e u aand . o t a bree mn ps :
#eua{ mn clr #1; oo: 11 bre-o:dte 1xbak odrtp otd p lc; bre-otm sld2xbak odrbto: oi p lc; .ota{ ps clr rd oo: e; bre-o:dte 1xbak odrtp otd p lc; bre-otm sld2xbak odrbto: oi p lc;

Any CSS class or id ruleset can be mixed-in that way.

file:///D:/Matheus/Desktop/less.html 4/13

22/03/12

LESS

The Dynamic Stylesheet language

Parametric Mi ins
LESS has a special type of ruleset which can be mixed in like classes, but accepts parameters. Here s the canonical example:
.odrrdu (rdu){ bre-ais @ais bre-ais @ais odrrdu: rdu; -o-odrrdu:@ais mzbre-ais rdu; -ektbre-ais @ais wbi-odrrdu: rdu;

And here s how we can mix it into various rulesets:

#edr{ hae .odrrdu(p) bre-ais4x; .utn{ bto .odrrdu(p) bre-ais6x;

Parametric mixins can also have default values for their parameters:
.odrrdu (rdu:5x { bre-ais @ais p) bre-ais @ais odrrdu: rdu; -o-odrrdu:@ais mzbre-ais rdu; -ektbre-ais @ais wbi-odrrdu: rdu;

We can invoke it like this now:

#edr{ hae .odrrdu; bre-ais

And it will include a 5px border-radius. You can also use parametric mixins which don t take parameters. This is useful if you want to hide the ruleset from the CSS output, but want to include its properties in other rulesets:
.rp( { wa ) tx-rp wa; etwa: rp wiesae pewa; ht-pc: r-rp wiesae -o-r-rp ht-pc: mzpewa; wr-rp bekwr; odwa: ra-od

pe{.rp r wa

Which would output:

pe{ r tx-rp wa; etwa: rp wiesae pewa; ht-pc: r-rp wiesae -o-r-rp ht-pc: mzpewa; wr-rp bekwr; odwa: ra-od

The @ r u e t variable agmns

file:///D:/Matheus/Desktop/less.html 5/13

22/03/12

LESS

The Dynamic Stylesheet language

@ r u e t has a special meaning inside mixins, agmns

it contains all the arguments passed, when the mixin was called. This is useful if you don t want to deal with individual parameters:
.o-hdw(x 0 @:0 @lr 1x @oo:#0){ bxsao @: , y , bu: p, clr 00 bxsao:@ruet; o-hdw agmns -o-o-hdw @ruet; mzbxsao: agmns -ektbxsao:@ruet; wbi-o-hdw agmns .o-hdw2x 5x; bxsao(p, p)

Which results in:

bxsao:2x5x1x#0; o-hdw p p p 00 -o-o-hdw 2x5x1x#0; mzbxsao: p p p 00 -ektbxsao:2x5x1x#0; wbi-o-hdw p p p 00

Pattern-matching and Guard e pressions

Sometimes, you may want to change the behaviour of a mixin, based on the parameters you pass to it. Let s start with something basic:
.ii (s @oo){.. mxn @, clr . .ls { cas .ii(sic,#8) mxn@wth 88;

Now let s say we want . i i to behave differently, based on the value of @ w t h we could define . i i mxn sic, mxn as such:
.ii (ak @oo){ mxn dr, clr clr dre(clr 1%; oo: akn@oo, 0) .ii (ih,@oo){ mxn lgt clr clr lgtn@oo,1%; oo: ihe(clr 0) .ii (_ @oo){ mxn @, clr dsly bok ipa: lc;

Now, if we run:
@wth lgt sic: ih; .ls { cas .ii(sic,#8) mxn@wth 88;

We will get the following CSS:

.ls { cas clr #222 oo: aaa; dsly bok ipa: lc;

Where the color passed to . i i was lightened. If the value of @ w t hwas d r , the result would be a mxn sic ak darker color. Here s what happened:
file:///D:/Matheus/Desktop/less.html 6/13

22/03/12

LESS

The Dynamic Stylesheet language

The first mixin definition didn t match because it expected d r as the first argument. ak The second mixin definition matched, because it expected l g t ih. The third mixin definition matched because it expected any value. Only mixin definitions which matched were used. Variables match and bind to any value. Anything other than a variable matches only with a value equal to itself. We can also match on arity, here s an example:
.ii (a { mxn @) clr @; oo: a .ii (a @){ mxn @, b clr fd(a @) oo: ae@, b;

Now if we call . i i with a single argument, we will get the output of the first definition, but if we call it with mxn two arguments, we will get the second definition, namely @ faded to @ . a b

Guards
Guards are useful when you want to match on expressions, as opposed to simple values or arity. If you are familiar with functional programming, you have probably encountered them already. In trying to stay as close as possible to the declarative nature of CSS, LESS has opted to implement conditional execution via guarded mi ins instead of if/else statements, in the vein of @ e i query feature specifications. mda Let s start with an example:
.ii (a we (ihns(a > 5% { mxn @) hn lgtes@) = 0) bcgon-oo:bak akrudclr lc; .ii (a we (ihns(a <5% { mxn @) hn lgtes@) 0) bcgon-oo:wie akrudclr ht; .ii (a { mxn @) clr @; oo: a

The key is the h nkeyword, which introduces a guard sequence (here with only one guard). Now if we run the e following code:
.ls1{.ii(dd cas mxn#d) .ls2{.ii(55 cas mxn#5)

Here s what we ll get:

.ls1{ cas bcgon-oo:bak akrudclr lc; clr #d; oo: dd .ls2{ cas bcgon-oo:wie akrudclr ht; clr #5; oo: 55

The full list of comparison operators usable in guards are: > > = = < Additionally, the keyword t u is the = < . re only truthy value, making these two mixins equivalent:
file:///D:/Matheus/Desktop/less.html 7/13

22/03/12

LESS

The Dynamic Stylesheet language

.rt (a we (a {.. tuh @) hn @) . .rt (a we (a=tu){.. tuh @) hn @ re .

Any value other than the keyword t u is falsy: re

.ls { cas .rt(0;/ Wl ntmthayo teaoedfntos tuh4) / il o ac n f h bv eiiin.

Guards can be separated with a comma ,if any of the guards evaluates to true, it s considered as a match:
.ii (a we (a>1) (a<-0 {.. mxn @) hn @ 0, @ 1) .

Note that you can also compare arguments with each other, or with non-arguments:
@ei:mbl; mda oie .ii (a we (mda=mbl){.. mxn @) hn @ei oie . .ii (a we (mda=dstp {.. mxn @) hn @ei eko) . .a (a @)we (a>@){wdh @ mx @, b hn @ b it: a .a (a @)we (a<@){wdh @ mx @, b hn @ b it: b

Lastly, if you want to match mixins based on value type, you can use the is* functions:
.ii (a @:0 we (subr@) {.. mxn @, b ) hn inme(b) . .ii (a @:bak we (soo(b){.. mxn @, b lc) hn iclr@) .

Here are the basic type checking functions:

iclr soo inme subr isrn stig ikyod sewr iul sr

If you want to check if a value, in addition to being a number, is in a specific unit, you may use one of:
ipxl sie ipretg secnae ie sm

Last but not least, you may use the a dkeyword to provide additional conditions inside a guard: n
.ii (a we (subr@) ad(a>0 {.. mxn @) hn inme(a) n @ ) .

And the n tkeyword to negate conditions: o

.ii (b we nt(b>0 {.. mxn @) hn o @ ) .

Nested rules
LESS gives you the ability to use nesting instead of, or in combination with cascading. Lets say we have the following CSS:
#edr{clr bak hae oo: lc; #edr.aiain{ hae nvgto
file:///D:/Matheus/Desktop/less.html 8/13

22/03/12

LESS

The Dynamic Stylesheet language

fn-ie 1p; otsz: 2x #edr.oo{ hae lg wdh 30x it: 0p; #edr.oohvr{ hae lg:oe tx-eoain nn; etdcrto: oe

In LESS, we can also write it this way:

#edr{ hae clr bak oo: lc; .aiain{ nvgto fn-ie 1p; otsz: 2x .oo{ lg wdh 30x it: 0p; &hvr{tx-eoain nn :oe etdcrto: oe

Or this way:
#edr hae .aiain nvgto .oo lg &hvr :oe {clr bak oo: lc; {fn-ie 1p otsz: 2x {wdh 30x it: 0p; {tx-eoain nn etdcrto: oe

The resulting code is more concise, and mimics the structure of your D M t e . O re Notice the &combinatorit s used when you want a nested selector to be concatenated to its parent selector, instead of acting as a descendant. This is especially important for pseudo-classes like : o e and : o u . hvr fcs For example:
.odrd{ bree &fot{ .la fot lf; la: et .o { tp mri:5x agn p;

Will output
.odrdfot{ bree.la fot lf; la: et .odrd.o { bree tp mri:5x agn p;

Operations
Any number, color or variable can be operated on. Here are a couple of examples:
file:///D:/Matheus/Desktop/less.html 9/13

22/03/12

LESS

The Dynamic Stylesheet language

@ae 5; bs: % @ilr @ae*2 fle: bs ; @te:@ae+@ilr ohr bs fle; clr #8 /4 oo: 88 ; bcgon-oo:@aeclr+#1; akrudclr bs-oo 11 hih:10 /2+@ilr egt 0% fle;

The output is pretty much what you expectLESS understands the difference between colors and units. If a unit is used in an operation, like in:
@a:1x+5 vr p ;

LESS will use that unit for the final output6 xin this case. p Brackets are also authorized in operations:
wdh (vr+5 *2 it: @a ) ;

And are required in compound values:

bre:(wdh*2 sldbak odr @it ) oi lc;

Color functions
LESS provides a variety of functions which transform colors. Colors are first converted to the HSL color-space, and then manipulated at the channel level:
lgtn@oo,1%; ihe(clr 0) dre(clr 1%; akn@oo, 0) / rtr aclrwihi 1%*ihe*ta @oo / eun oo hc s 0 lgtr hn clr / rtr aclrwihi 1%*akr ta @oo / eun oo hc s 0 dre* hn clr

strt(clr 1%; auae@oo, 0) / rtr aclr1%*oe strtdta @oo / eun oo 0 mr* auae hn clr dstrt(clr 1%; / rtr aclr1%*es strtdta @oo eauae@oo, 0) / eun oo 0 ls* auae hn clr fdi(clr 1%; aen@oo, 0) fdot@oo,1%; aeu(clr 0) fd(clr 5%; ae@oo, 0) si(clr 1) pn@oo, 0; si(clr -0; pn@oo, 1) mx@oo1 @oo2; i(clr, clr) / rtr aclr1%*es tasaetta @oo / eun oo 0 ls* rnprn hn clr / rtr aclr1%*oe tasaetta @oo / eun oo 0 mr* rnprn hn clr / rtr @oo wt 5%tasaec / eun clr ih 0 rnprny / rtr aclrwt a1 dge lre i heta @oo / eun oo ih 0 ere agr n u hn clr / rtr aclrwt a1 dge salrheta @oo / eun oo ih 0 ere mle u hn clr / rtr amxo @oo1ad@oo2 / eun i f clr n clr

Using them is pretty straightforward:

@ae #065 bs: f41; .ls { cas clr strt(bs,5) oo: auae@ae %; bcgon-oo:lgtnsi(bs,8,2%; akrudclr ihe(pn@ae ) 5)

You can also extract color information:

he@oo) u(clr; / rtrste`u`canlo @oo / eun h he hne f clr strto(clr;/ rtrste`auain canlo @oo auain@oo) / eun h strto` hne f clr lgtes@oo) / rtrste'ihns'canlo @oo ihns(clr; / eun h lgtes hne f clr apa@oo) lh(clr; / rtrste'lh'canlo @oo / eun h apa hne f clr

file:///D:/Matheus/Desktop/less.html

10/13

22/03/12

LESS

The Dynamic Stylesheet language

This is useful if you want to create a new color based on another color s channel, for example:
@e:hlhe@l) 4% 9%; nw s(u(od, 5, 0) @ e will have @ l s hue, nw od

and its own saturation and lightness.

Math functions
LESS provides a couple of handy math functions you can use on number values:
rud16) / rtrs`` on(.7; / eun 2 ci(.) el24; / rtrs`` / eun 3 for26; / rtrs`` lo(.) / eun 2

If you need to turn a value into a percentage, you can do so with the p r e t g function: ecnae
pretg(.) / rtrs`0` ecnae05; / eun 5%

Namespaces
Sometimes, you may want to group your variables or mixins, for organizational purposes, or just to offer some encapsulation. You can do this pretty intuitively in LESSsay you want to bundle some mixins and variables under # u d e for later re-use, or for distributing: bnl,
#ude{ bnl .utn( { bto ) dsly bok ipa: lc; bre:1xsldbak odr p oi lc; bcgon-oo:ge; akrudclr ry &hvr{bcgon-oo:wie :oe akrudclr ht .a {.. tb . .iain{.. ctto .

Now if we want to mixin the . u t nclass in our # e d r a we can do: bto hae ,
#edra{ hae clr oag; oo: rne #ude>.utn bnl bto;

Scope
Scope in LESS is very similar to that of programming languages. Variables and mixins are first looked up locally, and if they aren t found, the compiler will look in the parent scope, and so on.
@a:rd vr e; #ae{ pg @a:wie vr ht; #edr{ hae clr @a;/ wie oo: vr / ht

#otr{ foe
file:///D:/Matheus/Desktop/less.html 11/13

22/03/12

LESS

The Dynamic Stylesheet language

clr @a;/ rd oo: vr / e

Comments
CSS-style comments are preserved by LESS:
/ Hlo ImaCSsyecmet* * el, ' S-tl omn / .ls {clr bak cas oo: lc

Single-line comments are also valid in LESS, but they are silent , they don t show up in the compiled CSS output:
/ H,Imasln cmet Iwntso u i yu CS / i ' iet omn, o' hw p n or S .ls {clr wie cas oo: ht

Importing
You can import . e sfiles, and all the variables and mixins in them will be made available to the main file. The ls . e sextension is optional, so both of these are valid: ls
@mot"i.es; ipr lbls" @mot"i" ipr lb;

If you want to import a CSS file, and don t want LESS to process it, just use the . s extension: cs
@mot"i.s" ipr lbcs;

The directive will just be left as is, and end up in the CSS output.

String interpolation
Variables can be embeded inside strings in a similar way to ruby or PHP, with the @ n m construct: {ae
@aeul "tp/ast.nr.o" bs-r: ht:/sesfodcm; bcgon-mg:ul"{aeul/mgsb.n"; akrudiae r(@bs-r iae/gpg)

Escaping
Sometimes you might need to output a CSS value which is either not valid CSS syntax, or uses proprietary syntax which LESS doesn t recognize. To output such value, we place it inside a string prefixed with , for example:
.ls { cas fle: "sawyHstOnytxFrSuf); itr m:lasaIswSna.o.tf("

This is called an escaped value, which will result in:

.ls { cas fle:m:lasaIswSna.o.tf(; itr sawyHstOnytxFrSuf)

JavaScript evaluation
file:///D:/Matheus/Desktop/less.html 12/13

22/03/12

LESS

The Dynamic Stylesheet language

JavaScript expressions can be evaluated as values inside .less files. This is done by wrapping the expression with back-ticks:
@a:`hlo.opeCs( +''; vr "el"tUprae) !`

Becomes:
@a:"EL!; vr HLO"

Note that you may also use interpolation and escaping as with strings:
@t:"el" sr hlo; @a: `@sr"tUprae)+''; vr "{t .opeCs( !`

Becomes:
@a:HLO; vr EL!

It is also possible to access the JavaScript environment:

@egt `ouetbd.letegt; hih: dcmn.oycinHih`

If you want to parse a JavaScript string as a hex color, you may use the c l rfunction: oo
@oo:clr`idwclr.aeoo`; clr oo(wno.oosbsClr) @akoo:dre(clr 1%; drclr akn@oo, 0)

file:///D:/Matheus/Desktop/less.html

13/13