Write some LESS:

@ b a s e :# f 9 3 8 a b ; . b o x s h a d o w ( @ s t y l e ,@ c )w h e n( i s c o l o r ( @ c ) ){ w e b k i t b o x s h a d o w :@ s t y l e@ c ; m o z b o x s h a d o w : @ s t y l e@ c ; b o x s h a d o w : @ s t y l e@ c ; } . b o x s h a d o w ( @ s t y l e ,@ a l p h a :5 0 % )w h e n( i s n u m b e r ( @ a l p h a ) ){ . b o x s h a d o w ( @ s t y l e ,r g b a ( 0 ,0 ,0 ,@ a l p h a ) ) ; } . b o x{ c o l o r :s a t u r a t e ( @ b a s e ,5 % ) ; b o r d e r c o l o r :l i g h t e n ( @ b a s e ,3 0 % ) ; d i v{. b o x s h a d o w ( 005 p x ,3 0 % )} }

The dynamic stylesheet language.

LESS extends CSS with dynamic behavior such as variables, mixins, operations and functions. LESS runs on both the server-side (with Node.js and Rhino) or client-side (modern browsers only). version 1 . 5 . 0 changelog

Compile to CSS:
n p mi n s t a l lgl e s s l e s s cs t y l e s . l e s ss t y l e s . c s s

overview

usage

language

function reference

changes

source

about

try it now!

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.
/ /L E S S @ c o l o r :# 4 D 9 2 6 F ; # h e a d e r{ c o l o r :@ c o l o r ; } h 2{ c o l o r :@ c o l o r ; } / *C o m p i l e dC S S* / # h e a d e r{ c o l o r :# 4 D 9 2 6 F ; } h 2{ c o l o r :# 4 D 9 2 6 F ; }

Mixins
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. Its just like variables, but for whole classes. Mixins can also behave like functions, and take arguments, as seen in the example below.
/ /L E S S . r o u n d e d c o r n e r s( @ r a d i u s :5 p x ){ w e b k i t b o r d e r r a d i u s :@ r a d i u s ; m o z b o r d e r r a d i u s :@ r a d i u s ; m s b o r d e r r a d i u s :@ r a d i u s ; o b o r d e r r a d i u s :@ r a d i u s ; b o r d e r r a d i u s :@ r a d i u s ; } / *C o m p i l e dC S S* / # h e a d e r{ w e b k i t b o r d e r r a d i u s :5 p x ; m o z b o r d e r r a d i u s :5 p x ; m s b o r d e r r a d i u s :5 p x ; o b o r d e r r a d i u s :5 p x ; b o r d e r r a d i u s :5 p x ; } # f o o t e r{

# h e a d e r{ . r o u n d e d c o r n e r s ; } # f o o t e r{ . r o u n d e d c o r n e r s ( 1 0 p x ) ; }

w e b k i t b o r d e r r a d i u s :1 0 p x ; m o z b o r d e r r a d i u s :1 0 p x ; m s b o r d e r r a d i u s :1 0 p x ; o b o r d e r r a d i u s :1 0 p x ; b o r d e r r a d i u s :1 0 p x ; }

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.
/ /L E S S # h e a d e r{ h 1{ f o n t s i z e :2 6 p x ; f o n t w e i g h t :b o l d ; } p{f o n t s i z e :1 2 p x ; a{t e x t d e c o r a t i o n :n o n e ; & : h o v e r{b o r d e r w i d t h :1 p x} } } } / *C o m p i l e dC S S* / # h e a d e rh 1{ f o n t s i z e :2 6 p x ; f o n t w e i g h t :b o l d ; } # h e a d e rp{ f o n t s i z e :1 2 p x ; } # h e a d e rpa{ t e x t d e c o r a t i o n :n o n e ; } # h e a d e rpa : h o v e r{ b o r d e r w i d t h :1 p x ; }

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. Operations should only be performed within parentheses in order to ensure compatibility with CSS. Functions map one-to-one with JavaScript code, allowing you to manipulate values however you want.
/ /L E S S @ t h e b o r d e r :1 p x ; @ b a s e c o l o r :# 1 1 1 ; @ r e d : # 8 4 2 2 1 0 ; # h e a d e r{ c o l o r :( @ b a s e c o l o r*3 ) ; b o r d e r l e f t :@ t h e b o r d e r ; b o r d e r r i g h t :( @ t h e b o r d e r*2 ) ; } # f o o t e r{ c o l o r :( @ b a s e c o l o r+# 0 0 3 3 0 0 ) ; b o r d e r c o l o r :d e s a t u r a t e ( @ r e d ,1 0 % ) ; } / *C o m p i l e dC S S* / # h e a d e r{ c o l o r :# 3 3 3 ; b o r d e r l e f t :1 p x ; b o r d e r r i g h t :2 p x ; } # f o o t e r{ c o l o r :# 1 1 4 4 1 1 ; b o r d e r c o l o r :# 7 d 2 7 1 7 ; }

Client-side usage
Client-side is the easiest way to get started and good for developing your LESS. For production and especially if performance is important, we recommend pre-compiling using node or one of the many third party tools. Link your . l e s sstylesheets with the r e lset to s t y l e s h e e t / l e s s :
< l i n kr e l = " s t y l e s h e e t / l e s s "t y p e = " t e x t / c s s "h r e f = " s t y l e s . l e s s "/ >

Then download l e s s . j sfrom the top of the page, and include it in the < h e a d >element of your page, like so:
< s c r i p ts r c = " l e s s . j s "t y p e = " t e x t / j a v a s c r i p t " > < / s c r i p t >

Make sure you include your stylesheets before the script. You can set options by setting things on a global LESS object before the script. E.g.
< s c r i p tt y p e = " t e x t / j a v a s c r i p t " > l e s s={ e n v :" d e v e l o p m e n t " ,/ /o r" p r o d u c t i o n " a s y n c :f a l s e , f i l e A s y n c :f a l s e , p o l l :1 0 0 0 , f u n c t i o n s :{ } , / /l o a di m p o r t sa s y n c / /l o a di m p o r t sa s y n cw h e ni nap a g eu n d e r / /af i l ep r o t o c o l / /w h e ni nw a t c hm o d e ,t i m ei nm sb e t w e e np o l l s / /u s e rf u n c t i o n s ,k e y e db yn a m e

d u m p L i n e N u m b e r s :" c o m m e n t s " ,/ /o r" m e d i a Q u e r y "o r" a l l " r e l a t i v e U r l s :f a l s e , / /w h e t h e rt oa d j u s tu r l ' st ob er e l a t i v e / /i ff a l s e ,u r l ' sa r ea l r e a d yr e l a t i v et ot h e / /e n t r yl e s sf i l e r o o t p a t h :" : / a . c o m / " / /ap a t ht oa d do nt ot h es t a r to fe v e r yu r l / / r e s o u r c e } ; < / s c r i p t > < s c r i p ts r c = " l e s s . j s "t y p e = " t e x t / j a v a s c r i p t " > < / s c r i p t >

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 a t c h to the browser URL, then refresh the page. Alternatively, you can run
l e s s . w a t c h ( )from the console.

Modify variables
modifyVars enables modification of LESS variables in run-time. When called with new values, the LESS file is

recompiled without reloading. Simple basic usage:

l e s s . m o d i f y V a r s ( { ' @ b u t t o n F a c e ' :' # 5 B 8 3 A D ' , ' @ b u t t o n T e x t ' :' # D 9 E E F 2 ' } ) ;

Debugging
It is possible to output rules in your CSS which allow tools to locate the source of the rule. Either specify the option d u m p L i n e N u m b e r sas above or add ! d u m p L i n e N u m b e r s : m e d i a Q u e r yto the url. You can use the comments option with FireLESS and the mediaQuery option with FireBug/Chrome dev tools (it is identical to the SCSS media query debugging format).

Server-side usage
Installation
The easiest way to install LESS on the server, is via npm, the node package manager, as so:
$n p mi n s t a l lgl e s s

Command-line usage
Once installed, you can invoke the compiler from the command-line, as such:
$l e s s cs t y l e s . l e s s

This will output the compiled CSS to s t d o u t , you may then redirect it to a file of your choice:
$l e s s cs t y l e s . l e s s>s t y l e s . c s s

To output minified CSS, simply pass the xoption. If you would like more involved minification, the YUI CSS Compressor is also available with the y u i c o m p r e s soption. To see all the command line options run lessc without parameters.

Usage in Code
You can invoke the compiler from node, as such:
v a rl e s s=r e q u i r e ( ' l e s s ' ) ;

l e s s . r e n d e r ( ' . c l a s s{w i d t h :( 1+1 )} ' ,f u n c t i o n( e ,c s s ){ c o n s o l e . l o g ( c s s ) ; } ) ;

which will output

. c l a s s{ w i d t h :2 ; }

you may also manually invoke the parser and compiler:

v a rp a r s e r=n e w ( l e s s . P a r s e r ) ; p a r s e r . p a r s e ( ' . c l a s s{w i d t h :( 1+1 )} ' ,f u n c t i o n( e r r ,t r e e ){ i f( e r r ){r e t u r nc o n s o l e . e r r o r ( e r r )} c o n s o l e . l o g ( t r e e . t o C S S ( ) ) ; } ) ;

Configuration
You may pass some options to the compiler:
v a rp a r s e r=n e w ( l e s s . P a r s e r ) ( { p a t h s :[ ' . ' ,' . / l i b ' ] ,/ /S p e c i f ys e a r c hp a t h sf o r@ i m p o r td i r e c t i v e s f i l e n a m e :' s t y l e . l e s s '/ /S p e c i f yaf i l e n a m e ,f o rb e t t e re r r o rm e s s a g e s } ) ; p a r s e r . p a r s e ( ' . c l a s s{w i d t h :( 1+1 )} ' ,f u n c t i o n( e ,t r e e ){ t r e e . t o C S S ( {c o m p r e s s :t r u e} ) ;/ /M i n i f yC S So u t p u t } ) ;

Third Party Tools

There are a selection of tools available to run in your particular environment and these are documented in the Github wiki. Command Line Tools GUI Tools

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 breeze, and if in doubt, lets you fall back to CSS.

Variables
These are pretty self-explanatory:
@ n i c e b l u e :# 5 B 8 3 A D ; @ l i g h t b l u e :( @ n i c e b l u e+# 1 1 1 ) ; # h e a d e r{c o l o r :@ l i g h t b l u e ;}

Outputs:
# h e a d e r{c o l o r :# 6 c 9 4 b e ;}

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

@ f n o r d :" Ia mf n o r d . " ; @ v a r :' f n o r d ' ; c o n t e n t :@ @ v a r ;

Which compiles to:

c o n t e n t :" Ia mf n o r d . " ;

When defining a variable twice, the last definition of the variable is used, searching from the current scope upwards. This is similar to css itself where the last property inside a definition is used to determine the value. For instance:
@ v a r :0 ; . c l a s s 1{ @ v a r :1 ; . c l a s s{ @ v a r :2 ; t h r e e :@ v a r ; @ v a r :3 ; } o n e :@ v a r ;

Compiles to:
. c l a s s 1. c l a s s{ t h r e e :3 ; } . c l a s s 1{ o n e :1 ; }

Variables are lazy loaded and do not have to be declared before being used. Valid less snippet:
l a z y e v a l{ w i d t h :@ v a r ; } @ v a r :@ a ; @ a :9 % ;

this is valid less too:

. l a z y e v a l s c o p e{ w i d t h :@ v a r ; @ a :9 % ; } @ v a r :@ a ; @ a :1 0 0 % ;

both compile into:

. l a z y e v a l s c o p e{ w i d t h :9 % ; }

Mixins
In LESS, it is possible to include a bunch of properties from one ruleset into another ruleset. So say we have the following class:
. b o r d e r e d{ b o r d e r t o p :d o t t e d1 p xb l a c k ; b o r d e r b o t t o m :s o l i d2 p xb l a c k ; }

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:
# m e n ua{ c o l o r :# 1 1 1 ; . b o r d e r e d ; } . p o s ta{ c o l o r :r e d ; . b o r d e r e d ; }

The properties of the . b o r d e r e dclass will now appear in both # m e n u aand . p o s ta :

# m e n ua{ c o l o r :# 1 1 1 ; b o r d e r t o p :d o t t e d1 p xb l a c k ; b o r d e r b o t t o m :s o l i d2 p xb l a c k ; } . p o s ta{ c o l o r :r e d ; b o r d e r t o p :d o t t e d1 p xb l a c k ; b o r d e r b o t t o m :s o l i d2 p xb l a c k ; }

Any CSS class or id ruleset can be mixed-in that way. Note: Variables are also mixed in, so variables from a mixin will be placed into the current scope. This is contentious and may change in the future.

Parametric Mixins
LESS has a special type of ruleset which can be mixed in like classes, but accepts parameters. Heres the canonical example:
. b o r d e r r a d i u s( @ r a d i u s ){ m o z b o r d e r r a d i u s :@ r a d i u s ; w e b k i t b o r d e r r a d i u s :@ r a d i u s ; b o r d e r r a d i u s :@ r a d i u s ; }

And heres how we can mix it into various rulesets:

# h e a d e r{ . b o r d e r r a d i u s ( 4 p x ) ; } . b u t t o n{

. b o r d e r r a d i u s ( 6 p x ) ; }

Parametric mixins can also have default values for their parameters:
. b o r d e r r a d i u s( @ r a d i u s :5 p x ){ m o z b o r d e r r a d i u s :@ r a d i u s ; w e b k i t b o r d e r r a d i u s :@ r a d i u s ; b o r d e r r a d i u s :@ r a d i u s ; }

We can invoke it like this now:

# h e a d e r{ . b o r d e r r a d i u s ; }

And it will include a 5px border-radius. You can also use parametric mixins which dont 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:
. w r a p( ){ t e x t w r a p :w r a p ; w h i t e s p a c e :m o z p r e w r a p ; w h i t e s p a c e :p r e w r a p ; w o r d w r a p :b r e a k w o r d ; } p r e{. w r a p}

Which would output:

p r e{ t e x t w r a p :w r a p ; w h i t e s p a c e :m o z p r e w r a p ; w h i t e s p a c e :p r e w r a p ; w o r d w r a p :b r e a k w o r d ; }

Mixins With Multiple Parameters

Parameters are either semicolon or comma separated. It is recommended to use semicolon. The symbol comma has double meaning: it can be interpreted either as a mixin parameters separator or as css list separator. Using comma as mixin separator makes it impossible to use comma separated list as an argument. Semicolon does not have such limitation. If the compiler sees at least one semicolon inside mixin call or declaration, it assumes that arguments are separated by semicolons. All commas then belong to css lists. For example:

two arguments and each contains comma separated list: . n a m e ( 1 ,2 ,3 ;s o m e t h i n g ,e l s e ) , three arguments and each contains one number: . n a m e ( 1 ,2 ,3 ) , use dummy semicolon to create mixin call with one argument containing comma separated css list: . n a m e ( 1 ,2 ,3 ; ) , comma separated default value: . n a m e ( @ p a r a m 1 :r e d ,b l u e ; ) . It is legal to define multiple mixins with the same name and number of parameters. Less will use properties of all that can apply. For example, if you used the mixin with one parameter e.g. . m i x i n ( g r e e n ) ; , then properties of all mixins with exactly one mandatory parameter will be used:
. m i x i n ( @ c o l o r ){ c o l o r 1 :@ c o l o r ; } . m i x i n ( @ c o l o r ;@ p a d d i n g : 2 ){ c o l o r 2 :@ c o l o r ; p a d d i n g 2 :@ p a d d i n g ; } . m i x i n ( @ c o l o r ;@ p a d d i n g ;@ m a r g i n :2 ){ c o l o r 3 :@ c o l o r ; p a d d i n g 3 :@ p a d d i n g ; m a r g i n :@ m a r g i n@ m a r g i n@ m a r g i n@ m a r g i n ; } . s o m e. s e l e c t o rd i v{ . m i x i n ( # 0 0 8 0 0 0 ) ; }

compiles into:
. s o m e. s e l e c t o rd i v{ c o l o r 1 :# 0 0 8 0 0 0 ; c o l o r 2 :# 0 0 8 0 0 0 ; p a d d i n g 2 :2 ; }

The @ a r g u m e n t svariable
@ a r g u m e n t shas a special meaning inside mixins, it contains all the arguments passed, when the mixin was

called. This is useful if you dont want to deal with individual parameters:
. b o x s h a d o w( @ x :0 ;@ y :0 ;@ b l u r :1 p x ;@ c o l o r :# 0 0 0 ){ m o z b o x s h a d o w :@ a r g u m e n t s ; w e b k i t b o x s h a d o w :@ a r g u m e n t s ; b o x s h a d o w :@ a r g u m e n t s ; } . b o x s h a d o w ( 2 p x ;5 p x ) ;

Which results in:

m o z b o x s h a d o w :2 p x5 p x1 p x# 0 0 0 ;

w e b k i t b o x s h a d o w :2 p x5 p x1 p x# 0 0 0 ; b o x s h a d o w :2 p x5 p x1 p x# 0 0 0 ;

Advanced arguments and the @ r e s tvariable

You can use . . .if you want your mixin to take a variable number of arguments. Using this after a variable name will assign those arguments to the variable.
. m i x i n( . . . ){ . m i x i n( ){ . m i x i n( @ a :1 ){ . m i x i n( @ a ;. . . ){ / /m a t c h e s0 Na r g u m e n t s / /m a t c h e se x a c t l y0a r g u m e n t s / /m a t c h e s0 1a r g u m e n t s / /m a t c h e s1 Na r g u m e n t s

. m i x i n( @ a :1 ;. . . ){/ /m a t c h e s0 Na r g u m e n t s

Furthermore:
. m i x i n( @ a ;@ r e s t . . . ){ / /@ r e s ti sb o u n dt oa r g u m e n t sa f t e r@ a / /@ a r g u m e n t si sb o u n dt oa l la r g u m e n t s }

Return Values
Variables defined inside mixins act as return values and are usable in caller. Returned variables never rewrite callers local variables. Only variables not present in callers local scope are copied. Variable defined in mixin acts as return value:
. m i x i n ( ){ @ g l o b a l :i n m i x i n ; @ l o c a l :i n m i x i n ; @ d e f i n e d O n l y I n M i x i n :i n m i x i n ; } . c l a s s{ @ l o c a l :l o c a l y d e f i n e d v a l u e ;/ / l o c a lv a r i a b l e-p r o t e c t e d m a r g i n :@ g l o b a l@ l o c a l@ d e f i n e d O n l y I n M i x i n ; . m i x i n ( ) ; } @ g l o b a l :o u t e r s c o p e ;/ /n o n l o c a lv a r i a b l e-r e w r i t t e n

Compiles into:
. c l a s s{ m a r g i n :i n m i x i nl o c a l y d e f i n e d v a l u ei n m i x i n ; }

Unlocking Mixins
Mixins defined in mixin are also usable in caller. There is no scope protection, mixins are unlocked even if the local scope contains mixin with the same name.
. u n l o c k ( @ v a l u e ){/ /o u t e rm i x i n . d o S o m e t h i n g ( ){/ /n e s t e dm i x i n d e c l a r a t i o n :@ v a l u e ; } } . s e l e c t o r{ . u n l o c k ( 5 ) ;/ /u n l o c kd o S o m e t h i n gm i x i n-m u s tb ef i r s t . d o S o m e t h i n g ( ) ;/ / n e s t e dm i x i nw a sc o p i e dh e r ea n di su s a b l e }

Compiles into:
. s e l e c t o r{ d e c l a r a t i o n :5 ; }

Unlocked mixins are available only after they have been unlocked. Following would throw syntax error:
. d o S o m e t h i n g ( ) ;/ /s y n t a xe r r o r :n e s t e dm i x i ni sn o ta v a i l a b l ey e t . u n l o c k ( 5 ) ;/ /t o ol a t e

The Keyword !important

Use the !important keyword after mixin call to mark all properties brought by it as !important: Sample input:
. m i x i n( @ a :0 ){ b o r d e r :@ a ; b o x e r :@ a ; } . u n i m p o r t a n t{ . m i x i n ( 1 ) ; } . i m p o r t a n t{ . m i x i n ( 2 )! i m p o r t a n t ; }

compiled into:

. u n i m p o r t a n t{ b o r d e r :1 ; b o x e r :1 ; } . i m p o r t a n t{ b o r d e r :2! i m p o r t a n t ; b o x e r :2! i m p o r t a n t ; }

Pattern-matching and Guard expressions

Sometimes, you may want to change the behaviour of a mixin, based on the parameters you pass to it. Lets start with something basic:
. m i x i n( @ s ;@ c o l o r ){. . .} . c l a s s{ . m i x i n ( @ s w i t c h ;# 8 8 8 ) ; }

Now lets say we want . m i x i nto behave differently, based on the value of @ s w i t c h , we could define . m i x i n as such:
. m i x i n( d a r k ;@ c o l o r ){ c o l o r :d a r k e n ( @ c o l o r ,1 0 % ) ; } . m i x i n( l i g h t ;@ c o l o r ){ c o l o r :l i g h t e n ( @ c o l o r ,1 0 % ) ; } . m i x i n( @ _ ;@ c o l o r ){ d i s p l a y :b l o c k ; }

Now, if we run:
@ s w i t c h :l i g h t ; . c l a s s{ . m i x i n ( @ s w i t c h ;# 8 8 8 ) ; }

We will get the following CSS:

. c l a s s{ c o l o r :# a 2 a 2 a 2 ; d i s p l a y :b l o c k ;

Where the color passed to . m i x i nwas lightened. If the value of @ s w i t c hwas d a r k , the result would be a darker color. Heres what happened: The first mixin definition didnt match because it expected d a r kas the first argument. The second mixin definition matched, because it expected l i g h t . 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, heres an example:
. m i x i n( @ a ){ c o l o r :@ a ; } . m i x i n( @ a ;@ b ){ c o l o r :f a d e ( @ a ;@ b ) ; }

Now if we call . m i x i nwith a single argument, we will get the output of the first definition, but if we call it with two arguments, we will get the second definition, namely @ afaded to @ 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 mixins instead of if/else statements, in the vein of @ m e d i aquery feature specifications. Lets start with an example:
. m i x i n( @ a )w h e n( l i g h t n e s s ( @ a )> =5 0 % ){ b a c k g r o u n d c o l o r :b l a c k ; } . m i x i n( @ a )w h e n( l i g h t n e s s ( @ a )<5 0 % ){ b a c k g r o u n d c o l o r :w h i t e ; } . m i x i n( @ a ){ c o l o r :@ a ; }

The key is the w h e nkeyword, which introduces a guard sequence (here with only one guard). Now if we run the following code:
. c l a s s 1{. m i x i n ( # d d d )} . c l a s s 2{. m i x i n ( # 5 5 5 )}

Heres what well get:

. c l a s s 1{ b a c k g r o u n d c o l o r :b l a c k ; c o l o r :# d d d ; } . c l a s s 2{ b a c k g r o u n d c o l o r :w h i t e ; c o l o r :# 5 5 5 ; }

The full list of comparison operators usable in guards are: > > === << . Additionally, the keyword t r u eis the only truthy value, making these two mixins equivalent:
. t r u t h( @ a )w h e n( @ a ){. . .} . t r u t h( @ a )w h e n( @ a=t r u e ){. . .}

Any value other than the keyword t r u eis falsy:

. c l a s s{ . t r u t h ( 4 0 ) ;/ /W i l ln o tm a t c ha n yo ft h ea b o v ed e f i n i t i o n s . }

Guards can be separated with a comma , if any of the guards evaluates to true, its considered as a match:
. m i x i n( @ a )w h e n( @ a>1 0 ) ,( @ a<1 0 ){. . .}

Note that you can also compare arguments with each other, or with non-arguments:
@ m e d i a :m o b i l e ; . m i x i n( @ a )w h e n( @ m e d i a=m o b i l e ){. . .} . m i x i n( @ a )w h e n( @ m e d i a=d e s k t o p ){. . .} . m a x( @ a ;@ b )w h e n( @ a>@ b ){w i d t h :@ a} . m a x( @ a ;@ b )w h e n( @ a<@ b ){w i d t h :@ b}

Lastly, if you want to match mixins based on value type, you can use the is* functions:
. m i x i n( @ a ;@ b :0 )w h e n( i s n u m b e r ( @ b ) ){. . .} . m i x i n( @ a ;@ b :b l a c k )w h e n( i s c o l o r ( @ b ) ){. . .}

Here are the basic type checking functions:

i s c o l o r i s n u m b e r

i s s t r i n g i s k e y w o r d i s u r l

If you want to check if a value, in addition to being a number, is in a specific unit, you may use one of:
i s p i x e l i s p e r c e n t a g e i s e m i s u n i t

Last but not least, you may use the a n dkeyword to provide additional conditions inside a guard:
. m i x i n( @ a )w h e n( i s n u m b e r ( @ a ) )a n d( @ a>0 ){. . .}

And the n o tkeyword to negate conditions:

. m i x i n( @ b )w h e nn o t( @ b>0 ){. . .}

Nested rules
LESS gives you the ability to use nesting instead of, or in combination with cascading. Lets say we have the following CSS:
# h e a d e r{c o l o r :b l a c k ;} # h e a d e r. n a v i g a t i o n{ f o n t s i z e :1 2 p x ; } # h e a d e r. l o g o{ w i d t h :3 0 0 p x ; } # h e a d e r. l o g o : h o v e r{ t e x t d e c o r a t i o n :n o n e ; }

In LESS, we can also write it this way:

# h e a d e r{ c o l o r :b l a c k ; . n a v i g a t i o n{ f o n t s i z e :1 2 p x ; } . l o g o{ w i d t h :3 0 0 p x ; & : h o v e r{t e x t d e c o r a t i o n :n o n e} } }

Or this way:
# h e a d e r . l o g o & : h o v e r } } {c o l o r :b l a c k ; {w i d t h :3 0 0 p x ; {t e x t d e c o r a t i o n :n o n e}

. n a v i g a t i o n {f o n t s i z e :1 2 p x}

The resulting code is more concise, and mimics the structure of your D O Mt r e e . Notice the &combinator - its 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 : h o v e rand : f o c u s . For example:
. b o r d e r e d{ & . f l o a t{ f l o a t :l e f t ; } . t o p{ m a r g i n :5 p x ; } }

Will output
. b o r d e r e d . f l o a t{ f l o a t :l e f t ; } . b o r d e r e d. t o p{ m a r g i n :5 p x ; }

Nested Media Queries

Media queries can be nested in the same way as selectors e.g.
. o n e{ @ m e d i a( w i d t h :4 0 0 p x ){ f o n t s i z e :1 . 2 e m ; @ m e d i ap r i n ta n dc o l o r{ c o l o r :b l u e ; } } }

Will output
@ m e d i a( w i d t h :4 0 0 p x ){ . o n e{ f o n t s i z e :1 . 2 e m ; } } @ m e d i a( w i d t h :4 0 0 p x )a n dp r i n ta n dc o l o r{ . o n e{ c o l o r :b l u e ; } }

Advanced Usage of &

The & symbol can be used in selectors in order to reverse the ordering of the nesting and to multiply classes. For example:
. c h i l d ,. s i b l i n g{ . p a r e n t&{ c o l o r :b l a c k ; } &+&{ c o l o r :r e d ; } }

Will output
. p a r e n t. c h i l d , . p a r e n t. s i b l i n g{ c o l o r :b l a c k ; } . c h i l d+. c h i l d , . c h i l d+. s i b l i n g , . s i b l i n g+. c h i l d , . s i b l i n g+. s i b l i n g{ c o l o r :r e d ; }

You can also use & in mixins in order to reference nesting that is outside of your mixin.

Extend
As of version 1.4, LESS supports extending a style. Extend is sort of like the opposite of a mixin. Instead of adding all the properties of a mixed-in class into a class, it adds the extending selector to the selector list for

output of the extended class. The syntax for extend is designed to mimic the syntax of CSS pseudo-classes, and can be combined with pseudo-classes as long as any extends selectors come last. For example:
d i v{ b a c k g r o u n d c o l o r :# e 0 e 0 e 0 ; } p : e x t e n d ( d i v ){ c o l o r :# 1 0 1 0 1 0 ; }

Will output
d i v , p { b a c k g r o u n d c o l o r :# e 0 e 0 e 0 ; } p { c o l o r :# 1 0 1 0 1 0 ; }

As you may have noticed, this can significantly remove the amount of bloat in the output CSS compared to mixins. The extend selector can be used on the same line as the class selector, or it can be nested as seen in this example:
. p a r e n t{ f o n t s i z e : 1 2 p t ; } . c h i l d{ & : e x t e n d ( . p a r e n t ) ; }

By default, extend does not include nested elements of the extended style. To do this, you must add a l lto the selector in the extend expression. For example:
. a . b . t e s t , . t e s t . c{ c o l o r :o r a n g e ; } . t e s t{ & : h o v e r{ c o l o r :g r e e n ; }

} . r e p l a c e m e n t: e x t e n d ( . t e s t ){ }

Outputs:
. a . b . t e s t , . t e s t . c{ c o l o r :o r a n g e ; } . t e s t : h o v e r{ c o l o r :g r e e n ; }

But this:
. a . b . t e s t , . t e s t . c{ c o l o r :o r a n g e ; } . t e s t{ & : h o v e r{ c o l o r :g r e e n ; } } . r e p l a c e m e n t: e x t e n d ( . t e s ta l l ){ }

Outputs:
. a . b . t e s t , . t e s t . c , . a . b . r e p l a c e m e n t , . r e p l a c e m e n t . c{ c o l o r :o r a n g e ; } . t e s t : h o v e r , . r e p l a c e m e n t : h o v e r{ c o l o r :g r e e n ; }

Operations
Any number, color or variable can be operated on. Operations should be performed within parentheses. Here are a couple of examples:
@ b a s e :5 % ;

@ f i l l e r :( @ b a s e*2 ) ; @ o t h e r :( @ b a s e+@ f i l l e r ) ; c o l o r :( # 8 8 8/4 ) ; b a c k g r o u n d c o l o r :( @ b a s e c o l o r+# 1 1 1 ) ; h e i g h t :( 1 0 0 %/2+@ f i l l e r ) ;

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:
@ v a r :( 1 p x+5 ) ;

LESS will use that unit for the final output6 p xin this case. Extra parentheses are also authorized in operations:
w i d t h :( ( @ v a r+5 )*2 ) ;

Functions
LESS provides a variety of functions which transform colors, manipulate strings and do maths. They are documented fully in the function reference. Using them is pretty straightforward. The following example uses percentage to convert 0.5 to 50%, increases the saturation of a base color by 5% and then sets the background color to one that is lightened by 25% and spun by 8 degrees:
@ b a s e :# f 0 4 6 1 5 ; @ w i d t h :0 . 5 ; . c l a s s{ w i d t h :p e r c e n t a g e ( 0 . 5 ) ;/ /r e t u r n s` 5 0 % ` c o l o r :s a t u r a t e ( @ b a s e ,5 % ) ; b a c k g r o u n d c o l o r :s p i n ( l i g h t e n ( @ b a s e ,2 5 % ) ,8 ) ; }

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 # b u n d l e , for later re-use, or for distributing:
# b u n d l e{ . b u t t o n( ){ d i s p l a y :b l o c k ; b o r d e r :1 p xs o l i db l a c k ;

b a c k g r o u n d c o l o r :g r e y ; & : h o v e r{b a c k g r o u n d c o l o r :w h i t e} } . t a b{. . .} . c i t a t i o n{. . .} }

Now if we want to mixin the . b u t t o nclass in our # h e a d e ra , we can do:

# h e a d e ra{ c o l o r :o r a n g e ; # b u n d l e>. b u t t o n ; }

You can unlock nested mixins into namespace by calling their owner mixin. Since nested mixins act as return values, all nested mixins are copied into namespace and available from there:
. u n l o c k ( @ v a l u e ){/ /o u t e rm i x i n . d o S o m e t h i n g ( ){/ /n e s t e dm i x i n d e c l a r a t i o n :@ v a l u e ; } } # n a m e s p a c e ( ){ . u n l o c k ( 5 ) ;/ /u n l o c kd o S o m e t h i n gm i x i n } # u s e n a m e s p a c e{ # n a m e s p a c e>. d o S o m e t h i n g ( ) ;/ /i tw o r k sa l s ow i t hn a m e s p a c e s }

Compiles into:
# u s e n a m e s p a c e{ d e c l a r a t i o n :5 ; }

Scope
Scope in LESS is very similar to that of programming languages. Variables and mixins are first looked up locally, and if they arent found, the compiler will look in the parent scope, and so on.
@ v a r :r e d ; # p a g e{ @ v a r :w h i t e ; # h e a d e r{

c o l o r :@ v a r ;/ /w h i t e } } # f o o t e r{ c o l o r :@ v a r ;/ /r e d }

Comments
CSS-style comments are preserved by LESS:
/ *H e l l o ,I ' maC S S s t y l ec o m m e n t* / . c l a s s{c o l o r :b l a c k}

Single-line comments are also valid in LESS, but they are silent, they dont show up in the compiled CSS output:
/ /H i ,I ' mas i l e n tc o m m e n t ,Iw o n ' ts h o wu pi ny o u rC S S . c l a s s{c o l o r :w h i t e}

Importing
You can import both CSS and LESS files. Only LESS files import statements are processed, CSS file import statements are kept as they are. If you want to import a CSS file, and dont want LESS to process it, just use the . c s sextension:
@ i m p o r t" l i b . c s s " ;

Compilation makes only one change to CSS file imports: top level CSS file imports are moved on top of the sheet, right after @charset declarations. Input file with import statement:
h 1{c o l o r :g r e e n ;} @ i m p o r t" i m p o r t / o f f i c i a l b r a n d i n g . c s s ? u r l P a r a m e t e r = 2 3 " ;

import statement has been moved on top:

@ i m p o r t" i m p o r t / o f f i c i a l b r a n d i n g . c s s ? u r l P a r a m e t e r = 2 3 " ; h 1{c o l o r :g r e e n ;}

Content of imported LESS file is copied into importing style sheet and compiled together with it. Importing and imported files share all mixins, namespaces, variables and other structures.

In addition, if the import statement has media queries specified in it, imported content is enclosed in the @ M e d i adeclaration. Imported library.less:
@ i m p o r t e d c o l o r :r e d ; h 1{c o l o r :g r e e n ;}

Main file imports the above library.less file:

@ i m p o r t" l i b r a r y . l e s s "s c r e e na n d( m a x w i d t h :4 0 0 p x ) ;/ /i m p o r tw i t hm e d i aq u e r i e s @ i m p o r t" l i b r a r y . l e s s " ;/ /i m p o r tw i t h o u tm e d i aq u e r i e s . c l a s s{ c o l o r :@ i m p o r t e d C o l o r ;/ /u s ei m p o r t e dv a r i a b l e }

Compiled output:
/ /C o r r e s p o n d st oi m p o r tw i t hm e d i aq u e r i e s @ m e d i as c r e e na n d( m a x w i d t h :4 0 0 p x ){ h 1{c o l o r :g r e e n ;} } / /C o r r e s p o n d st oi m p o r tw i t h o u tm e d i aq u e r i e s h 1{c o l o r :g r e e n ;} . c l a s s{ / /U s ei m p o r t e dv a r i a b l e c o l o r :# f f 0 0 0 0 ; }

LESS file import statement does not have to be located on top of the style sheet. It can be placed also inside rulesets, mixins or other LESS structures. Import into ruleset:
p r e{ @ i m p o r t" l i b r a r y . l e s s " ; c o l o r :@ i m p o r t e d C o l o r ; }

both variable and ruleset defined in library.less have been copied into the p r eruleset:
p r e{ c o l o r :# f f 0 0 0 0 ;/ /v a r i a b l ed e f i n e di nl i b r a r y . l e s sw a sa v a i l a b l e } p r eh 1{/ /r u l e s e td e f i n e di nl i b r a r y . l e s sw a sn e s t e di n t o' p r e 'r u l e s e t c o l o r :g r e e n ; }

In v1.3.0 - v1.3.3 @ i m p o r timports a file multiple times and you can override this behaviour with @ i m p o r t o n c e . In v1.4.0 @ i m p o r t o n c ehas been removed and @ i m p o r timports once by default. This means that with the following @import file.less; @import file.less; The second file is ignored. Any file that does not end with . c s sis considered less file and processed. In addition, if the file name has no extension or parameters, the .less suffix is added on the end. Both of these are equivalent:
@ i m p o r t" l i b . l e s s " ; @ i m p o r t" l i b " ;

In v1.4.0 you can force a file to be interpreted as a particular type by specifying an option, e.g.
@ i m p o r t( c s s )" l i b " ;

Will output..
@ i m p o r t" l i b " ;

and
@ i m p o r t( l e s s )" l i b . c s s " ;

Will import the lib.css file and treat it as less. If you specify a file is less and do not include an extension, none will be added.

String interpolation
Variables can be embedded inside strings in a similar way to Ruby or PHP, with the @ { n a m e }construct:
@ b a s e u r l :" h t t p : / / a s s e t s . f n o r d . c o m " ; b a c k g r o u n d i m a g e :u r l ( " @ { b a s e u r l } / i m a g e s / b g . p n g " ) ;

Escaping
Sometimes you might need to output a CSS value which is either not valid CSS syntax, or uses proprietary syntax which LESS doesnt recognize. To output such value, we place it inside a string prefixed with ~ , for example:

. c l a s s{ f i l t e r :~ " m s : a l w a y s H a s I t s O w n S y n t a x . F o r . S t u f f ( ) " ; }

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

. c l a s s{ f i l t e r :m s : a l w a y s H a s I t s O w n S y n t a x . F o r . S t u f f ( ) ; }

Escaped values can use the interpolation exactly the same way as strings:
. c l a s s{ @ w h a t :" S t u f f " ; f i l t e r :~ " m s : a l w a y s H a s I t s O w n S y n t a x . F o r . @ { w h a t } ( ) " ; }

Selector Interpolation
If you want to use LESS variables inside selectors, you can do this by referencing the variable using @ { s e l e c t o r }as in string interpolation. For example:
@ n a m e :b l o c k e d ; . @ { n a m e }{ c o l o r :b l a c k ; }

will output
. b l o c k e d{ c o l o r :b l a c k ; }

Note: prior to LESS 1.3.1 a ( ~ " @ { n a m e } " )type of selector was supported. Support for this will be removed in 1.4.0.

Media Queries as Variables

If you want to use less variables inside media, you can do this using the usual variable variable referencing syntax @ v a r i a b l e . For example:
@ s i n g l e Q u e r y :~ " ( m a x w i d t h :5 0 0 p x ) " ; @ m e d i as c r e e n ,@ s i n g l e Q u e r y{ s e t{

p a d d i n g :3333 ; } }

compiles into:
@ m e d i as c r e e n ,( m a x w i d t h :5 0 0 p x ){ s e t{ p a d d i n g :3333 ; } }

The variable must contain whole media query. This would cause an error: @ m e d i as c r e e na n d@ p a r t i a l { . In 1.4.0, without strict maths off, you can also include variables in media values, e.g. @ m e d i as c r e e n ,( m a x w i d t h :@ w i d t h ){ .

JavaScript evaluation
JavaScript expressions can be evaluated as values inside .less files. We recommend using caution with this feature as the LESS will not be compilable by ports and it makes the LESS harder to maintain. If possible, try to think of a function that can be added to achieve the same purpose and ask for it on github. We have plans to allow expanding the default functions available. However, if you still want to use JavaScript in .less, this is done by wrapping the expression with back-ticks:
@ v a r :` " h e l l o " . t o U p p e r C a s e ( )+' ! ' ` ;

Becomes:
@ v a r :" H E L L O ! " ;

Note that you may also use interpolation and escaping as with strings:
@ s t r :" h e l l o " ; @ v a r :~ ` " @ { s t r } " . t o U p p e r C a s e ( )+' ! ' ` ;

Becomes:
@ v a r :H E L L O ! ;

It is also possible to access the JavaScript environment:

@ h e i g h t :` d o c u m e n t . b o d y . c l i e n t H e i g h t ` ;

If you want to parse a JavaScript string as a hex color, you may use the c o l o rfunction:

@ c o l o r :c o l o r ( ` w i n d o w . c o l o r s . b a s e C o l o r ` ) ; @ d a r k c o l o r :d a r k e n ( @ c o l o r ,1 0 % ) ;

Function Reference
Index
e s c a p e ( @ s t r i n g ) ; e ( @ s t r i n g ) ; % ( @ s t r i n g ,v a l u e s . . . ) ; / /U R Le n c o d e sas t r i n g / /e s c a p es t r i n gc o n t e n t / /f o r m a t sas t r i n g

u n i t ( @ d i m e n s i o n ,[ @ u n i t :" " ] ) ;/ /r e m o v eo rc h a n g et h eu n i to fad i m e n s i o n c o l o r ( @ s t r i n g ) ; d a t a u r i ( [ m i m e t y p e , ]u r l ) ; c e i l ( @ n u m b e r ) ; f l o o r ( @ n u m b e r ) ; p e r c e n t a g e ( @ n u m b e r ) ; r o u n d ( n u m b e r ,[ p l a c e s :0 ] ) ; s q r t ( n u m b e r ) ; a b s ( n u m b e r ) ; s i n ( n u m b e r ) ; a s i n ( n u m b e r ) ; c o s ( n u m b e r ) ; a c o s ( n u m b e r ) ; t a n ( n u m b e r ) ; a t a n ( n u m b e r ) ; p i ( ) ; p o w ( @ b a s e ,@ e x p o n e n t ) ; m o d ( n u m b e r ,n u m b e r ) ; c o n v e r t ( n u m b e r ,u n i t s ) ; u n i t ( n u m b e r ,u n i t s ) ; c o l o r ( s t r i n g ) ; r g b ( @ r ,@ g ,@ b ) ; r g b a ( @ r ,@ g ,@ b ,@ a ) ; a r g b ( @ c o l o r ) ; h s l ( @ h u e ,@ s a t u r a t i o n ,@ l i g h t n e s s ) ; h s v ( @ h u e ,@ s a t u r a t i o n ,@ v a l u e ) ; h s v a ( @ h u e ,@ s a t u r a t i o n ,@ v a l u e ,@ a l p h a ) ; / /p a r s e sas t r i n gt oac o l o r / /*i n l i n e sar e s o u r c ea n df a l l sb a c kt ou r l ( ) / /r o u n d su pt oa ni n t e g e r / /r o u n d sd o w nt oa ni n t e g e r / /c o n v e r t st oa% ,e . g .0 . 5>5 0 % / /r o u n d san u m b e rt oan u m b e ro fp l a c e s / /*c a l c u l a t e ss q u a r er o o to fan u m b e r / /*a b s o l u t ev a l u eo fan u m b e r / /*s i n ef u n c t i o n / /*a r c s i n e-i n v e r s eo fs i n ef u n c t i o n / /*c o s i n ef u n c t i o n / /*a r c c o s i n e-i n v e r s eo fc o s i n ef u n c t i o n / /*t a n g e n tf u n c t i o n / /*a r c t a n g e n t-i n v e r s eo ft a n g e n tf u n c t i o n / /*r e t u r n sp i / /*f i r s ta r g u m e n tr a i s e dt ot h ep o w e ro ft h es e c o n da r g u m e n t / /*f i r s ta r g u m e n tm o d u l u ss e c o n da r g u m e n t / /*c o n v e r t sb e t w e e nn u m b e rt y p e s / /* c h a n g e sn u m b e ru n i t sw i t h o u tc o n v e r t i n gi t / /c o n v e r t ss t r i n go re s c a p e dv a l u ei n t oc o l o r / /c o n v e r t st oac o l o r / /c o n v e r t st oac o l o r / /c r e a t e sa# A A R R G G B B / /c r e a t e sac o l o r / /c r e a t e sac o l o r / /c r e a t e sac o l o r

h s l a ( @ h u e ,@ s a t u r a t i o n ,@ l i g h t n e s s ,@ a l p h a ) ;/ /c r e a t e sac o l o r

h u e ( @ c o l o r ) ; s a t u r a t i o n ( @ c o l o r ) ; l i g h t n e s s ( @ c o l o r ) ; h s v h u e ( @ c o l o r ) ; h s v v a l u e ( @ c o l o r ) ; r e d ( @ c o l o r ) ; g r e e n ( @ c o l o r ) ; b l u e ( @ c o l o r ) ; a l p h a ( @ c o l o r ) ; l u m a ( @ c o l o r ) ; s a t u r a t e ( @ c o l o r ,1 0 % ) ;

/ /r e t u r n st h e` h u e `c h a n n e lo f@ c o l o ri nt h eH S Ls p a c e / /r e t u r n st h e` s a t u r a t i o n `c h a n n e lo f@ c o l o ri nt h eH S Ls p a c e / /r e t u r n st h e' l i g h t n e s s 'c h a n n e lo f@ c o l o ri nt h eH S Ls p a c e / /*r e t u r n st h e` h u e `c h a n n e lo f@ c o l o ri nt h eH S Vs p a c e / /*r e t u r n st h e' v a l u e 'c h a n n e lo f@ c o l o ri nt h eH S Vs p a c e / /r e t u r n st h e' r e d 'c h a n n e lo f@ c o l o r / /r e t u r n st h e' g r e e n 'c h a n n e lo f@ c o l o r / /r e t u r n st h e' b l u e 'c h a n n e lo f@ c o l o r / /r e t u r n st h e' a l p h a 'c h a n n e lo f@ c o l o r / /r e t u r n st h e' l u m a 'v a l u e( p e r c e p t u a lb r i g h t n e s s )o f@ c o l o r / /r e t u r nac o l o r1 0 %p o i n t s* m o r e *s a t u r a t e d / /r e t u r nac o l o r1 0 %p o i n t s* l e s s *s a t u r a t e d / /r e t u r nac o l o r1 0 %p o i n t s* l i g h t e r * / /r e t u r nac o l o r1 0 %p o i n t s* d a r k e r * / /r e t u r nac o l o r1 0 %p o i n t s* l e s s *t r a n s p a r e n t / /r e t u r nac o l o r1 0 %p o i n t s* m o r e *t r a n s p a r e n t / /r e t u r n@ c o l o rw i t h5 0 %t r a n s p a r e n c y / /r e t u r nac o l o rw i t ha1 0d e g r e el a r g e ri nh u e / /r e t u r nac o l o rm i x e d1 0 %w i t hw h i t e / /r e t u r nac o l o rm i x e d1 0 %w i t hb l a c k / /r e t u r n sag r e y ,1 0 0 %d e s a t u r a t e dc o l o r / /r e t u r n@ d a r k c o l o ri f@ c o l o r 1i s>4 3 %l u m a / /o t h e r w i s er e t u r n@ l i g h t c o l o r ,s e en o t e s

h s v s a t u r a t i o n ( @ c o l o r ) ;/ /*r e t u r n st h e` s a t u r a t i o n `c h a n n e lo f@ c o l o ri nt h eH S Vs p a c e

d e s a t u r a t e ( @ c o l o r ,1 0 % ) ; l i g h t e n ( @ c o l o r ,1 0 % ) ; d a r k e n ( @ c o l o r ,1 0 % ) ; f a d e i n ( @ c o l o r ,1 0 % ) ; f a d e o u t ( @ c o l o r ,1 0 % ) ; f a d e ( @ c o l o r ,5 0 % ) ; s p i n ( @ c o l o r ,1 0 ) ; t i n t ( @ c o l o r ,1 0 % ) ; s h a d e ( @ c o l o r ,1 0 % ) ; g r e y s c a l e ( @ c o l o r ) ;

m i x ( @ c o l o r 1 ,@ c o l o r 2 ,[ @ w e i g h t :5 0 % ] ) ; / /r e t u r nam i xo f@ c o l o r 1a n d@ c o l o r 2

c o n t r a s t ( @ c o l o r 1 ,[ @ d a r k c o l o r :b l a c k ] ,[ @ l i g h t c o l o r :w h i t e ] ,[ @ t h r e s h o l d :4 3 % ] ) ;

m u l t i p l y ( @ c o l o r 1 ,@ c o l o r 2 ) ; s c r e e n ( @ c o l o r 1 ,@ c o l o r 2 ) ; o v e r l a y ( @ c o l o r 1 ,@ c o l o r 2 ) ; s o f t l i g h t ( @ c o l o r 1 ,@ c o l o r 2 ) ; h a r d l i g h t ( @ c o l o r 1 ,@ c o l o r 2 ) ; d i f f e r e n c e ( @ c o l o r 1 ,@ c o l o r 2 ) ; e x c l u s i o n ( @ c o l o r 1 ,@ c o l o r 2 ) ; a v e r a g e ( @ c o l o r 1 ,@ c o l o r 2 ) ; n e g a t i o n ( @ c o l o r 1 ,@ c o l o r 2 ) ; i s c o l o r ( @ c o l o r O r A n y t h i n g ) ; c o l o r s i s n u m b e r ( @ n u m b e r O r A n y t h i n g ) ; i s s t r i n g ( @ s t r i n g O r A n y t h i n g ) ; i s k e y w o r d ( @ k e y w o r d O r A n y t h i n g ) ; i s u r l ( @ u r l O r A n y t h i n g ) ; i s p i x e l ( @ p i x e l O r A n y t h i n g ) ; i s p e r c e n t a g e ( @ p e r c e n t a g e O r A n y t h i n g ) ; i s e m ( @ e m O r A n y t h i n g ) ; i s u n i t ( @ n u m b e r O r A n y t h i n g ," r e m " ) ; p a r t i c u l a ru n i t / /*T h e s ef u n c t i o n sa r eo n l ya v a i l a b l ei nt h e1 . 4 . 0b e t a / /r e t u r n st r u ei fan u m b e ro fa n yu n i t / /r e t u r n st r u ei fi ti sp a s s e das t r i n g / /r e t u r n st r u ei fi ti sp a s s e dk e y w o r d / /r e t u r n st r u ei fi ti sas t r i n ga n dau r l / /r e t u r n st r u ei fi ti san u m b e ra n dap x / /r e t u r n st r u ei fi ti san u m b e ra n da% / /r e t u r n st r u ei fi ti san u m b e ra n da ne m / /*r e t u r n si fap a r a m e t e ri san u m b e ra n di si na / /r e t u r n st r u ei fp a s s e dac o l o r ,i n c l u d i n gk e y w o r d

String functions
escape
Applies URL-encoding to special characters found in the input string. Following characters are exceptions and not encoded: , ,/ ,? ,@ ,& ,+ ,' ,~ , !and $ . Most common encoded characters are: < s p a c e > ,# ,^ ,( ,) ,{ ,} ,| ,: ,> ,< ,; ,] , [and = . Parameters:
s t r i n g : A string to escape

Returns: escaped s t r i n gcontent without quotes. Example:

e s c a p e ( ' a = 1 ' )

Output:
a % 3 D 1

Note: Function behavior if a parameter is non-string parameters is not defined. Current implementation returns u n d e f i n e don color and unchanged input on any other kind of argument. This behaviour should not be relied on and can change in the future.

e
CSS escaping similar to ~ " v a l u e "syntax. It expects string as a parameter and return its content as is, but without quotes. It can be used to output CSS value which is either not valid CSS syntax, or uses proprietary syntax which LESS doesnt recognize. Parameters:
s t r i n g : A string to escape

Returns: s t r i n gcontent without quotes. Example:

f i l t e r :~ " m s : a l w a y s H a s I t s O w n S y n t a x . F o r . S t u f f ( ) " ;

Output:
f i l t e r :m s : a l w a y s H a s I t s O w n S y n t a x . F o r . S t u f f ( ) ;

Note: The function accepts also ~ " "escaped values and numbers as parameters. Anything else returns an error.

% format
The function % ( " f o r m a t " ,a r g u m e n t s. . . )formats a string. The first argument is string with placeholders. All placeholders start with percentage symbol %followed by letter s ,S ,d ,D ,a , or A . Remaining arguments contain expressions to replace placeholders. If you need to print the percentage symbol, escape it by another percentage % % . Use uppercase placeholders if you need to escape special characters into their utf-8 escape codes. The function escapes all special characters except ( ) ' ~ ! . Space is encoded as % 2 0 . Lowercase placeholders leave special characters as they are. Placeholders: * d, D, a, A - can be replaced by any kind of argument (color, number, escaped value, expression, ). If you use them in combination with string, the whole string will be used - including its quotes. However, the quotes are placed into the string as they are, they are not escaped by / nor anything similar. * s, S - can be replaced by any kind of argument except color. If you use them in combination with string, only the string value will be used - string quotes are omitted. Parameters:
s t r i n g : format string with placeholders, a n y t h i n g * : values to replace placeholders.

Returns: formatted s t r i n g . Example:

f o r m a t a d :% ( " r e p e t i t i o n s :% af i l e :% d " ,1+2 ," d i r e c t o r y / f i l e . l e s s " ) ; f o r m a t a d u p p e r :% ( ' r e p e t i t i o n s :% Af i l e :% D ' ,1+2 ," d i r e c t o r y / f i l e . l e s s " ) ; f o r m a t s :% ( " r e p e t i t i o n s :% sf i l e :% s " ,1+2 ," d i r e c t o r y / f i l e . l e s s " ) ; f o r m a t s u p p e r :% ( ' r e p e t i t i o n s :% Sf i l e :% S ' ,1+2 ," d i r e c t o r y / f i l e . l e s s " ) ;

Output:
f o r m a t a d :" r e p e t i t i o n s :3f i l e :" d i r e c t o r y / f i l e . l e s s " " ; f o r m a t a d u p p e r :" r e p e t i t i o n s :3f i l e :% 2 2 d i r e c t o r y % 2 F f i l e . l e s s % 2 2 " ; f o r m a t s :" r e p e t i t i o n s :3f i l e :d i r e c t o r y / f i l e . l e s s " ; f o r m a t s u p p e r :" r e p e t i t i o n s :3f i l e :d i r e c t o r y % 2 F f i l e . l e s s " ;

Misc functions
color
Parses a color, so a string representing a color becomes a color. Parameters:
s t r i n g : A string of the color

Example:

c o l o r ( " # a a a " ) ;

Output:
# a a a

unit
Remove or change the unit of a dimension Parameters:
d i m e n s i o n : A number, with or without a dimension u n i t : Optional: the unit to change to, or if omitted it will remove the unit

Example:
u n i t ( 5 ,p x )

Output:
5 p x

Example:
u n i t ( 5 e m )

Output:
5

data-uri
Inlines a resource and falls back to u r l ( )if the ieCompat option is on and the resource is too large, or if you use the function in the browser. If the mime is not given then node uses the mime package to determine the correct mime type. Parameters:
m i m e t y p e : A mime type string. Optional. u r l : The URL of the file to inline.

Example:
d a t a u r i ( ' . . / d a t a / i m a g e . j p g ' ) ;

Output:

u r l ( ' d a t a : i m a g e / j p e g ; b a s e 6 4 , b m 9 0 I G F j d H V h b G x 5 I G E g a n B l Z y B m a W x l C g = = ' ) ;

Output in the browser:

u r l ( ' . . / d a t a / i m a g e . j p g ' ) ;

Example:
d a t a u r i ( ' i m a g e / j p e g ; b a s e 6 4 ' ,' . . / d a t a / i m a g e . j p g ' ) ;

Output:
u r l ( ' d a t a : i m a g e / j p e g ; b a s e 6 4 , b m 9 0 I G F j d H V h b G x 5 I G E g a n B l Z y B m a W x l C g = = ' ) ;

Math functions
ceil
Rounds up to the next highest integer. Parameters:
n u m b e r : A floating point number.

Returns: i n t e g e r Example:
c e i l ( 2 . 4 )

Output:
3

floor
Rounds down to the next lowest integer. Parameters:
n u m b e r : A floating point number.

Returns: i n t e g e r Example:
f l o o r ( 2 . 6 )

Output:
2

percentage
Converts a floating point number into a percentage string. Parameters:
n u m b e r : A floating point number.

Returns: s t r i n g Example:
p e r c e n t a g e ( 0 . 5 )

Output:
5 0 %

round
Applies rounding. Parameters:
n u m b e r : A floating point number. d e c i m a l P l a c e s : Optional: The number of decimal places to round to. Defaults to 0.

Returns: n u m b e r Example:
r o u n d ( 1 . 6 7 )

Output:
2

Example:
r o u n d ( 1 . 6 7 ,1 )

Output:
1 . 7

sqrt
Calculates square root of a number. Keeps units as they are. Parameters:
n u m b e r : A floating point number.

Returns: n u m b e r Example:
s q r t ( 2 5 c m )

Output:
5 c m

Example:
s q r t ( 1 8 . 6 % )

Output:
4 . 3 1 2 7 7 1 7 3 0 5 6 9 5 6 5 % ;

abs
Calculates absolute value of a number. Keeps units as they are. Parameters:
n u m b e r : A floating point number.

Returns: n u m b e r Example:
a b s ( 2 5 c m )

Output:
2 5 c m

Example:
a b s ( 1 8 . 6 % )

Output:

1 8 . 6 % ;

sin
Calculates sine function. Assumes radians on numbers without units. Parameters:
n u m b e r : A floating point number.

Returns: n u m b e r Example:
s i n ( 1 ) ;/ /s i n eo f1r a d i a n s i n ( 1 d e g ) ;/ /s i n eo f1d e g r e e s i n ( 1 g r a d ) ;/ /s i n eo f1g r a d i a n

Output:
0 . 8 4 1 4 7 0 9 8 4 8 0 7 8 9 6 5 ;/ /s i n eo f1r a d i a n 0 . 0 1 7 4 5 2 4 0 6 4 3 7 2 8 3 5 1 ;/ /s i n eo f1d e g r e e 0 . 0 1 5 7 0 7 3 1 7 3 1 1 8 2 0 6 7 5 ;/ /s i n eo f1g r a d i a n

asin
Calculates arcsine (inverse of sine) function. Returns number in radians e.g. a number between -/2 and /2. Parameters:
n u m b e r : A floating point number from [-1, 1] interval.

Returns: n u m b e r Example:
a s i n ( 0 . 8 4 1 4 7 0 9 8 4 8 0 7 8 9 6 5 ) a s i n ( 0 ) a s i n ( 2 )

Output:
1 r a d 0 r a d N a N r a d

cos
Calculates cosine function. Assumes radians on numbers without units.

Parameters:
n u m b e r : A floating point number.

Returns: n u m b e r Example:
c o s ( 1 )/ /c o s i n eo f1r a d i a n c o s ( 1 d e g )/ /c o s i n eo f1d e g r e e c o s ( 1 g r a d )/ /c o s i n eo f1g r a d i a n

Output:
0 . 5 4 0 3 0 2 3 0 5 8 6 8 1 3 9 8/ /c o s i n eo f1r a d i a n 0 . 9 9 9 8 4 7 6 9 5 1 5 6 3 9 1 3/ /c o s i n eo f1d e g r e e 0 . 9 9 9 8 7 6 6 3 2 4 8 1 6 6 0 6/ /c o s i n eo f1g r a d i a n

acos
Calculates arccosine (inverse of cosine) function. Returns number in radians e.g. a number between 0 and . Parameters:
n u m b e r : A floating point number from [-1, 1] interval.

Returns: n u m b e r Example:
a c o s ( 0 . 5 4 0 3 0 2 3 0 5 8 6 8 1 3 9 8 ) a c o s ( 1 ) a c o s ( 2 )

Output:
1 r a d 0 r a d N a N r a d

tan
Calculates tangent function. Assumes radians on numbers without units. Parameters:
n u m b e r : A floating point number.

Returns: n u m b e r Example:

t a n ( 1 )/ /t a n g e n to f1r a d i a n t a n ( 1 d e g )/ /t a n g e n to f1d e g r e e t a n ( 1 g r a d )/ /t a n g e n to f1g r a d i a n

Output:
1 . 5 5 7 4 0 7 7 2 4 6 5 4 9 0 2 3/ /t a n g e n to f1r a d i a n 0 . 0 1 7 4 5 5 0 6 4 9 2 8 2 1 7 5 8 5/ /t a n g e n to f1d e g r e e 0 . 0 1 5 7 0 9 2 5 5 3 2 3 6 6 4 9 1 6/ /t a n g e n to f1g r a d i a n

atan
Calculates arctangent (inverse of tangent) function. Returns number in radians e.g. a number between -/2 and /2. Parameters:
n u m b e r : A floating point number.

Returns: n u m b e r Example:
a t a n ( 1 . 5 5 7 4 0 7 7 2 4 6 5 4 9 0 2 3 ) a t a n ( 0 ) r o u n d ( a t a n ( 2 2 ) ,6 )/ /a r c t a n g e n to f2 2r o u n d e dt o6d e c i m a lp l a c e s

Output:
1 r a d 0 r a d 1 . 5 2 5 3 7 3 r a d ;

pi
Returns (pi); Parameters: none Returns: n u m b e r Example:
p i ( )

Output:
3 . 1 4 1 5 9 2 6 5 3 5 8 9 7 9 3

pow
Returns the value of the first argument raised to the power of the second argument. Returned value has the same dimension as the first parameter and the dimension of the second parameter is ignored. Parameters:
n u m b e r : base -a floating point number. n u m b e r : exponent - a floating point number.

Returns: n u m b e r Example:
p o w ( 0 c m ,0 p x ) p o w ( 2 5 ,2 ) p o w ( 2 5 ,0 . 5 ) p o w ( 2 5 ,0 . 5 ) p o w ( 2 5 % ,0 . 5 )

Output:
1 c m 0 . 0 0 1 6 5 N a N N a N %

mod
Returns the value of the first argument modulus second argument. Returned value has the same dimension as the first parameter, the dimension of the second parameter is ignored. The function is able to handle also negative and floating point numbers. Parameters:
n u m b e r : a floating point number. n u m b e r : a floating point number.

Returns: n u m b e r Example:
m o d ( 0 c m ,0 p x ) m o d ( 1 1 c m ,6 p x ) ; m o d ( 2 6 % ,5 ) ;

Output:
N a N c m ;

5 c m 1 % ;

convert
Converts numbers from one type into another. First argument contains number with units and second argument contains units. If both units are compatible, the number is converted. If they are not compatible, function returns first argument without modifying it. Compatible unit groups: * lengths: m ,c m ,m m ,i n ,p tand p c , * time: sand m s , * angle: r a d ,d e g ,g r a dand t u r n . Parameters:
n u m b e r : a floating point number with units. i d e n t i f i e r ,s t r i n gor e s c a p e dv a l u e : units

Returns: n u m b e r Example:
c o n v e r t ( 9 s ," m s " ) c o n v e r t ( 1 4 c m ,m m ) c o n v e r t ( 8 ,m m )/ /i n c o m p a t i b l eu n i tt y p e s

Output:
9 0 0 0 m s 1 4 0 m m 8

Unit
Returns number with different units. Only units are changed, number itself is not converted. The function assumes that second parameter contains valid unit type. Parameters:
n u m b e r : a floating point number with units. i d e n t i f i e ror e s c a p e dv a l u e : units.

Returns: n u m b e r Example:
u n i t ( 9 s ,~ " m s " ) u n i t ( 9 ,m )

Output:
9 m s

9 m

Color
Converts a string or escaped value into a color. The input must contain color in hexadecimal or shorthand representation. Parameters:
i d e n t i f i e ror e s c a p e dv a l u ewith valid color in hexadecimal or shorthand representation.

Returns: c o l o r Example:
c o l o r ( " # 4 4 5 5 6 6 " ) c o l o r ( ~ " # 1 2 3 " )

Output:
# 4 4 5 5 6 6 # 1 1 2 2 3 3

Color functions
Color definition
rgb
Creates an opaque color object from decimal red, green and blue (RGB) values. Literal color values in standard HTML/CSS formats may also be used to define colors, for example # f f 0 0 0 0 . Parameters:
r e d : An integer 0-255 or percentage 0-100%. g r e e n : An integer 0-255 or percentage 0-100%. b l u e : An integer 0-255 or percentage 0-100%.

Returns: c o l o r Example:
r g b ( 9 0 ,1 2 9 ,3 2 )

Output:
# 5 a 8 1 2 0

rgba

Creates a transparent color object from decimal red, green, blue and alpha (RGBA) values. Parameters:
r e d : An integer 0-255 or percentage 0-100%. g r e e n : An integer 0-255 or percentage 0-100%. b l u e : An integer 0-255 or percentage 0-100%. a l p h a : An number 0-1 or percentage 0-100%.

Returns: c o l o r Example:
r g b a ( 9 0 ,1 2 9 ,3 2 ,0 . 5 )

Output:
r g b a ( 9 0 ,1 2 9 ,3 2 ,0 . 5 )

argb
Creates a hex representation of a color in # A A R R G G B Bformat (NOT # R R G G B B A A !). This format is used in Internet Explorer, and .NET and Android development. Parameters:
c o l o r : A color object.

Returns: s t r i n g Example:
a r g b ( r g b a ( 9 0 ,2 3 ,1 4 8 ,0 . 5 ) ) ;

Output:
# 8 0 5 a 1 7 9 4

hsl
Creates an opaque color object from hue, saturation and lightness (HSL) values. Parameters:
h u e : An integer 0-360 representing degrees. s a t u r a t i o n : A percentage 0-100% or number 0-1. l i g h t n e s s : A percentage 0-100% or number 0-1.

Returns: c o l o r Example:

h s l ( 9 0 ,1 0 0 % ,5 0 % )

Output:
# 8 0 f f 0 0

This is useful if you want to create a new color based on another colors channel, for example:
@ n e w :h s l ( h u e ( @ o l d ) ,4 5 % ,9 0 % ) ;

@ n e wwill have @ o l d s hue, and its own saturation and lightness.

hsla
Creates a transparent color object from hue, saturation, lightness and alpha (HSLA) values. Parameters:
h u e : An integer 0-360 representing degrees. s a t u r a t i o n : A percentage 0-100% or number 0-1. l i g h t n e s s : A percentage 0-100% or number 0-1. a l p h a : A percentage 0-100% or number 0-1.

Returns: c o l o r Example:
h s l ( 9 0 ,1 0 0 % ,5 0 % ,0 . 5 )

Output:
r g b a ( 1 2 8 ,2 5 5 ,0 ,0 . 5 )

hsv
Creates an opaque color object from hue, saturation and value (HSV) values. Note that this is not the same as h s l , and is a color space available in Photoshop. Parameters:
h u e : An integer 0-360 representing degrees. s a t u r a t i o n : A percentage 0-100% or number 0-1. v a l u e : A percentage 0-100% or number 0-1.

Returns: c o l o r Example:
h s v ( 9 0 ,1 0 0 % ,5 0 % )

Output:
# 4 0 8 0 0 0

hsva
Creates a transparent color object from hue, saturation, value and alpha (HSVA) values. Note that this is not the same as h s l a , and is a color space available in Photoshop. Parameters:
h u e : An integer 0-360 representing degrees. s a t u r a t i o n : A percentage 0-100% or number 0-1. v a l u e : A percentage 0-100% or number 0-1. a l p h a : A percentage 0-100% or number 0-1.

Returns: c o l o r Example:
h s v a ( 9 0 ,1 0 0 % ,5 0 % ,0 . 5 )

Output:
r g b a ( 6 4 ,1 2 8 ,0 ,0 . 5 )

Color channel information

hue
Extracts the hue channel of a color object. Parameters:
c o l o r : A color object.

Returns: i n t e g e r0-360 Example:

h u e ( h s l ( 9 0 ,1 0 0 % ,5 0 % ) )

Output:
9 0

saturation
Extracts the saturation channel of a color object.

Parameters:
c o l o r : A color object.

Returns: p e r c e n t a g e0-100 Example:

s a t u r a t i o n ( h s l ( 9 0 ,1 0 0 % ,5 0 % ) )

Output:
1 0 0 %

lightness
Extracts the lightness channel of a color object. Parameters:
c o l o r : A color object.

Returns: p e r c e n t a g e0-100 Example:

l i g h t n e s s ( h s l ( 9 0 ,1 0 0 % ,5 0 % ) )

Output:
5 0 %

hsvhue
Extracts the hue channel of a color object in the HSV color space. Parameters:
c o l o r : A color object.

Returns: i n t e g e r0-360 Example:

h s v h u e ( h s v ( 9 0 ,1 0 0 % ,5 0 % ) )

Output:
9 0

hsvsaturation
Extracts the saturation channel of a color object in the HSV color space. Parameters:
c o l o r : A color object.

Returns: p e r c e n t a g e0-100 Example:

h s v s a t u r a t i o n ( h s v ( 9 0 ,1 0 0 % ,5 0 % ) )

Output:
1 0 0 %

hsvvalue
Extracts the value channel of a color object in the HSV color space. Parameters:
c o l o r : A color object.

Returns: p e r c e n t a g e0-100 Example:

h s v v a l u e ( h s v ( 9 0 ,1 0 0 % ,5 0 % ) )

Output:
5 0 %

red
Extracts the red channel of a color object. Parameters:
c o l o r : A color object.

Returns: i n t e g e r0-255 Example:

r e d ( r g b ( 1 0 ,2 0 ,3 0 ) )

Output:

1 0

green
Extracts the green channel of a color object. Parameters:
c o l o r : A color object.

Returns: i n t e g e r0-255 Example:

g r e e n ( r g b ( 1 0 ,2 0 ,3 0 ) )

Output:
2 0

blue
Extracts the blue channel of a color object. Parameters:
c o l o r : A color object.

Returns: i n t e g e r0-255 Example:

b l u e ( r g b ( 1 0 ,2 0 ,3 0 ) )

Output:
3 0

alpha
Extracts the alpha channel of a color object. Parameters:
c o l o r : A color object.

Returns: f l o a t0-1 Example:

a l p h a ( r g b a ( 1 0 ,2 0 ,3 0 ,0 . 5 ) )

Output:
0 . 5

luma
Calculates the luma) (perceptual brightness) of a color object. Uses SMPTE C / Rec. 709 coefficients, as recommended in WCAG 2.0. This calculation is also used in the contrast function. Parameters:
c o l o r : A color object.

Returns: p e r c e n t a g e0-100% Example:

l u m a ( r g b ( 1 0 0 ,2 0 0 ,3 0 ) )

Output:
6 5 %

Color operations
Color operations generally take parameters in the same units as the values they are changing, and percentage are handled as absolutes, so increasing a 10% value by 10% results in 20%, not 11%, and values are clamped to their allowed ranges; they do not wrap around. Where return values are shown, weve also shown formats that make it clear what each function has done, in addition to the hex versions that you will usually be be working with.

saturate
Increase the saturation of a color by an absolute amount. Parameters:
c o l o r : A color object. a m o u n t : A percentage 0-100%.

Returns: c o l o r Example:
s a t u r a t e ( h s l ( 9 0 ,9 0 % ,5 0 % ) ,1 0 % )

Output:

# 8 0 f f 0 0/ /h s l ( 9 0 ,1 0 0 % ,5 0 % )

desaturate
Decrease the saturation of a color by an absolute amount. Parameters:
c o l o r : A color object. a m o u n t : A percentage 0-100%.

Returns: c o l o r Example:
d e s a t u r a t e ( h s l ( 9 0 ,9 0 % ,5 0 % ) ,1 0 % )

Output:
# 8 0 e 5 1 a/ /h s l ( 9 0 ,8 0 % ,5 0 % )

lighten
Increase the lightness of a color by an absolute amount. Parameters:
c o l o r : A color object. a m o u n t : A percentage 0-100%.

Returns: c o l o r Example:
l i g h t e n ( h s l ( 9 0 ,9 0 % ,5 0 % ) ,1 0 % )

Output:
# 9 9 f 5 3 d/ /h s l ( 9 0 ,9 0 % ,6 0 % )

darken
Decrease the lightness of a color by an absolute amount. Parameters:
c o l o r : A color object. a m o u n t : A percentage 0-100%.

Returns: c o l o r

Example:
d a r k e n ( h s l ( 9 0 ,9 0 % ,5 0 % ) ,1 0 % )

Output:
# 6 6 c 2 0 a/ /h s l ( 9 0 ,9 0 % ,4 0 % )

fadein
Decrease the transparency (or increase the opacity) of a color, making it more opaque. Has no effect on opaque colours. To fade in the other direction use f a d e o u t . Parameters:
c o l o r : A color object. a m o u n t : A percentage 0-100%.

Returns: c o l o r Example:
f a d e i n ( h s l a ( 9 0 ,9 0 % ,5 0 % ,0 . 5 ) ,1 0 % )

Output:
r g b a ( 1 2 8 ,2 4 2 ,1 3 ,0 . 6 )/ /h s l a ( 9 0 ,9 0 % ,5 0 % ,0 . 6 )

fadeout
Increase the transparency (or decrease the opacity) of a color, making it less opaque. To fade in the other direction use f a d e i n . Parameters:
c o l o r : A color object. a m o u n t : A percentage 0-100%.

Returns: c o l o r Example:
f a d e o u t ( h s l a ( 9 0 ,9 0 % ,5 0 % ,0 . 5 ) ,1 0 % )

Output:
r g b a ( 1 2 8 ,2 4 2 ,1 3 ,0 . 4 )/ /h s l a ( 9 0 ,9 0 % ,5 0 % ,0 . 6 )

fade

Set the absolute transparency of a color. Can be applied to colors whether they already have an opacity value or not. Parameters:
c o l o r : A color object. a m o u n t : A percentage 0-100%.

Returns: c o l o r Example:
f a d e ( h s l ( 9 0 ,9 0 % ,5 0 % ) ,1 0 % )

Output:
r g b a ( 1 2 8 ,2 4 2 ,1 3 ,0 . 1 )/ / h s l a ( 9 0 ,9 0 % ,5 0 % ,0 . 1 )

spin
Rotate the hue angle of a color in either direction. While the angle range is 0-360, it applies a mod 360 operation, so you can pass in much larger (or negative) values and they will wrap around e.g. angles of 360 and 720 will produce the same result. Note that colours are passed through an RGB conversion, which doesnt retain hue value for greys (because hue has no meaning when there is no saturation), so make sure you apply functions in a way that preserves hue, for example dont do this:
@ c :s a t u r a t e ( s p i n ( # a a a a a a ,1 0 ) ,1 0 % ) ;

Do this instead:
@ c :s p i n ( s a t u r a t e ( # a a a a a a ,1 0 % ) ,1 0 ) ;

Colors are always returned as RGB values, so applying s p i nto a grey value will do nothing. Parameters:
c o l o r : A color object. a n g l e : A number of degrees to rotate (+ or -).

Returns: c o l o r Example:
s p i n ( h s l ( 1 0 ,9 0 % ,5 0 % ) ,2 0 ) s p i n ( h s l ( 1 0 ,9 0 % ,5 0 % ) ,2 0 )

Output:
# f 2 7 f 0 d/ /h s l ( 3 0 ,9 0 % ,5 0 % ) # f 2 0 d 3 3/ /h s l ( 3 5 0 ,9 0 % ,5 0 % )

mix
Mix two colors together in variable proportion. Opacity is included in the calculations. Parameters:
c o l o r 1 : A color object. c o l o r 1 : A color object. w e i g h t : Optional, a percentage balance point between the two colors, defaults to 50%.

Returns: c o l o r Example:
m i x ( # f f 0 0 0 0 ,# 0 0 0 0 f f ,5 0 % ) m i x ( r g b a ( 1 0 0 , 0 , 0 , 1 . 0 ) ,r g b a ( 0 , 1 0 0 , 0 , 0 . 5 ) ,5 0 % )

Output:
# 8 0 0 0 8 0 r g b a ( 7 5 ,2 5 ,0 ,0 . 7 5 )

greyscale
Remove all saturation from a color; the same as calling d e s a t u r a t e ( @ c o l o r ,1 0 0 % ) . Because the saturation is not affected by hue, the resulting color mapping may be somewhat dull or muddy; l u m amay provide a better result as it extracts perceptual rather than linear brightness, for example g r e y s c a l e ( ' # 0 0 0 0 f f ' )will return the same value as g r e y s c a l e ( ' # 0 0 f f 0 0 ' ) , though they appear quite different in brightness to the human eye. Parameters:
c o l o r : A color object.

Returns: c o l o r Example:
g r e y s c a l e ( h s l ( 9 0 ,9 0 % ,5 0 % ) )

Output:
# 8 0 8 0 8 0/ /h s l ( 9 0 ,0 % ,5 0 % )

contrast
Choose which of two colors provides the greatest contrast with another. This is useful for ensuring that a color is readable against a background, which is also useful for accessibility compliance. This function works the same way as the contrast function in Compass for SASS. In accordance with WCAG 2.0, colors are compared using their luma value, not their lightness.

The light and dark parameters can be supplied in either order - the function will calculate their luma values and assign light and dark appropriately. Parameters:
c o l o r : A color object to compare against. d a r k : optional - A designated dark color (defaults to black). l i g h t : optional - A designated light color (defaults to white). t h r e s h o l d : optional - A percentage 0-100% specifying where the transition from dark to light is

(defaults to 43%). This is used to bias the contrast one way or another, for example to allow you to decide whether a 50% grey background should result in black or white text. You would generally set this lower for lighter palettes, higher for darker ones. Defaults to 43%. Returns: c o l o r Example:
c o n t r a s t ( # a a a a a a ) c o n t r a s t ( # 2 2 2 2 2 2 ,# 1 0 1 0 1 0 ) c o n t r a s t ( # 2 2 2 2 2 2 ,# 1 0 1 0 1 0 ,# d d d d d d ) c o n t r a s t ( h s l ( 9 0 ,1 0 0 % ,5 0 % ) , # 0 0 0 0 0 0 , # f f f f f f , 4 0 % ) ; c o n t r a s t ( h s l ( 9 0 ,1 0 0 % ,5 0 % ) , # 0 0 0 0 0 0 , # f f f f f f , 6 0 % ) ;

Output:
# 0 0 0 0 0 0/ /b l a c k # f f f f f f/ /w h i t e # d d d d d d # 0 0 0 0 0 0/ /b l a c k # f f f f f f/ /w h i t e

Color blending
These operations are similar to the blend modes found in image editors like Photoshop, Fireworks or GIMP, so you can use them to make your CSS colors match your images.

multiply
Multiply two colors. For each two colors their RGB channel are multiplied then divided by 255. The result is a darker color. Parameters:
c o l o r 1 : A color object to multiply against. c o l o r 2 : A color object to multiply against.

Returns: c o l o r Examples:

m u l t i p l y ( # f f 6 6 0 0 ,# 0 0 0 0 0 0 ) ;

m u l t i p l y ( # f f 6 6 0 0 ,# 3 3 3 3 3 3 ) ;

m u l t i p l y ( # f f 6 6 0 0 ,# 6 6 6 6 6 6 ) ;

m u l t i p l y ( # f f 6 6 0 0 ,# 9 9 9 9 9 9 ) ;

m u l t i p l y ( # f f 6 6 0 0 ,# c c c c c c ) ;

m u l t i p l y ( # f f 6 6 0 0 ,# f f f f f f ) ;

m u l t i p l y ( # f f 6 6 0 0 ,# f f 0 0 0 0 ) ;

m u l t i p l y ( # f f 6 6 0 0 ,# 0 0 f f 0 0 ) ;

m u l t i p l y ( # f f 6 6 0 0 ,# 0 0 0 0 f f ) ;

screen

Do the opposite effect from m u l t i p l y . The result is a brighter color. Parameters:

c o l o r 1 : A color object to screen against. c o l o r 2 : A color object to screen against.

Returns: c o l o r Example:
s c r e e n ( # f f 6 6 0 0 ,# 0 0 0 0 0 0 ) ;

s c r e e n ( # f f 6 6 0 0 ,# 3 3 3 3 3 3 ) ;

s c r e e n ( # f f 6 6 0 0 ,# 6 6 6 6 6 6 ) ;

s c r e e n ( # f f 6 6 0 0 ,# 9 9 9 9 9 9 ) ;

s c r e e n ( # f f 6 6 0 0 ,# c c c c c c ) ;

s c r e e n ( # f f 6 6 0 0 ,# f f f f f f ) ;

s c r e e n ( # f f 6 6 0 0 ,# f f 0 0 0 0 ) ;

s c r e e n ( # f f 6 6 0 0 ,# 0 0 f f 0 0 ) ;

s c r e e n ( # f f 6 6 0 0 ,# 0 0 0 0 f f ) ;

overlay
Combines the effect from both m u l t i p l yand s c r e e n . Conditionally make light channels lighter and dark channels darker. Note: The results of the conditions are determined by the first color parameter. Parameters:
c o l o r 1 : A color object to overlay another. Also it is the determinant color to make the result lighter or

darker.
c o l o r 2 : A color object to be overlayed.

Returns: c o l o r Example:
o v e r l a y ( # f f 6 6 0 0 ,# 0 0 0 0 0 0 ) ;

o v e r l a y ( # f f 6 6 0 0 ,# 3 3 3 3 3 3 ) ;

o v e r l a y ( # f f 6 6 0 0 ,# 6 6 6 6 6 6 ) ;

o v e r l a y ( # f f 6 6 0 0 ,# 9 9 9 9 9 9 ) ;

o v e r l a y ( # f f 6 6 0 0 ,# c c c c c c ) ;

o v e r l a y ( # f f 6 6 0 0 ,# f f f f f f ) ;

o v e r l a y ( # f f 6 6 0 0 ,# f f 0 0 0 0 ) ;

o v e r l a y ( # f f 6 6 0 0 ,# 0 0 f f 0 0 ) ;

o v e r l a y ( # f f 6 6 0 0 ,# 0 0 0 0 f f ) ;

softlight
Similar to o v e r l a ybut avoid pure black resulting in pure black, and pure white resulting in pure white. Parameters:
c o l o r 1 : A color object to soft light another. c o l o r 2 : A color object to be soft lighten.

Returns: c o l o r Example:
s o f t l i g h t ( # f f 6 6 0 0 ,# 0 0 0 0 0 0 ) ;

s o f t l i g h t ( # f f 6 6 0 0 ,# 3 3 3 3 3 3 ) ;

s o f t l i g h t ( # f f 6 6 0 0 ,# 6 6 6 6 6 6 ) ;

s o f t l i g h t ( # f f 6 6 0 0 ,# 9 9 9 9 9 9 ) ;

s o f t l i g h t ( # f f 6 6 0 0 ,# c c c c c c ) ;

s o f t l i g h t ( # f f 6 6 0 0 ,# f f f f f f ) ;

s o f t l i g h t ( # f f 6 6 0 0 ,# f f 0 0 0 0 ) ;

s o f t l i g h t ( # f f 6 6 0 0 ,# 0 0 f f 0 0 ) ;

s o f t l i g h t ( # f f 6 6 0 0 ,# 0 0 0 0 f f ) ;

hardlight
Similar to o v e r l a ybut use the second color to detect light and dark channels instead of using the first color. Parameters:
c o l o r 1 : A color object to overlay another. c o l o r 2 : A color object to be overlayed. Also it is the determinant color to make the result lighter or

darker. Returns: c o l o r Example:

h a r d l i g h t ( # f f 6 6 0 0 ,# 0 0 0 0 0 0 ) ;

h a r d l i g h t ( # f f 6 6 0 0 ,# 3 3 3 3 3 3 ) ;

h a r d l i g h t ( # f f 6 6 0 0 ,# 6 6 6 6 6 6 ) ;

h a r d l i g h t ( # f f 6 6 0 0 ,# 9 9 9 9 9 9 ) ;

h a r d l i g h t ( # f f 6 6 0 0 ,# c c c c c c ) ;

h a r d l i g h t ( # f f 6 6 0 0 ,# f f f f f f ) ;

h a r d l i g h t ( # f f 6 6 0 0 ,# f f 0 0 0 0 ) ;

h a r d l i g h t ( # f f 6 6 0 0 ,# 0 0 f f 0 0 ) ;

h a r d l i g h t ( # f f 6 6 0 0 ,# 0 0 0 0 f f ) ;

difference
Substracts the second color from the first color. The operation is made per RGB channels. The result is a darker color. Parameters:
c o l o r 1 : A color object to act as the minuend. c o l o r 2 : A color object to act as the subtrahend.

Returns: c o l o r

Example:
d i f f e r e n c e ( # f f 6 6 0 0 ,# 0 0 0 0 0 0 ) ;

d i f f e r e n c e ( # f f 6 6 0 0 ,# 3 3 3 3 3 3 ) ;

d i f f e r e n c e ( # f f 6 6 0 0 ,# 6 6 6 6 6 6 ) ;

d i f f e r e n c e ( # f f 6 6 0 0 ,# 9 9 9 9 9 9 ) ;

d i f f e r e n c e ( # f f 6 6 0 0 ,# c c c c c c ) ;

d i f f e r e n c e ( # f f 6 6 0 0 ,# f f f f f f ) ;

d i f f e r e n c e ( # f f 6 6 0 0 ,# f f 0 0 0 0 ) ;

d i f f e r e n c e ( # f f 6 6 0 0 ,# 0 0 f f 0 0 ) ;

d i f f e r e n c e ( # f f 6 6 0 0 ,# 0 0 0 0 f f ) ;

exclusion
Similar effect to d i f f e r e n c ewith lower contrast. Parameters:
c o l o r 1 : A color object to act as the minuend. c o l o r 2 : A color object to act as the subtrahend.

Returns: c o l o r Example:
e x c l u s i o n ( # f f 6 6 0 0 ,# 0 0 0 0 0 0 ) ;

e x c l u s i o n ( # f f 6 6 0 0 ,# 3 3 3 3 3 3 ) ;

e x c l u s i o n ( # f f 6 6 0 0 ,# 6 6 6 6 6 6 ) ;

e x c l u s i o n ( # f f 6 6 0 0 ,# 9 9 9 9 9 9 ) ;

e x c l u s i o n ( # f f 6 6 0 0 ,# c c c c c c ) ;

e x c l u s i o n ( # f f 6 6 0 0 ,# f f f f f f ) ;

e x c l u s i o n ( # f f 6 6 0 0 ,# f f 0 0 0 0 ) ;

e x c l u s i o n ( # f f 6 6 0 0 ,# 0 0 f f 0 0 ) ;

e x c l u s i o n ( # f f 6 6 0 0 ,# 0 0 0 0 f f ) ;

average
Compute the average of two colors. The operation is made per RGB channels. Parameters:
c o l o r 1 : A color object. c o l o r 2 : A color object.

Returns: c o l o r Example:
a v e r a g e ( # f f 6 6 0 0 ,# 0 0 0 0 0 0 ) ;

a v e r a g e ( # f f 6 6 0 0 ,# 3 3 3 3 3 3 ) ;

a v e r a g e ( # f f 6 6 0 0 ,# 6 6 6 6 6 6 ) ;

a v e r a g e ( # f f 6 6 0 0 ,# 9 9 9 9 9 9 ) ;

a v e r a g e ( # f f 6 6 0 0 ,# c c c c c c ) ;

a v e r a g e ( # f f 6 6 0 0 ,# f f f f f f ) ;

a v e r a g e ( # f f 6 6 0 0 ,# f f 0 0 0 0 ) ;

a v e r a g e ( # f f 6 6 0 0 ,# 0 0 f f 0 0 ) ;

a v e r a g e ( # f f 6 6 0 0 ,# 0 0 0 0 f f ) ;

negation
Do the opposite effect from d i f f e r e n c e . The result is a brighter color. Note: The opposite effect doesnt mean the inverted effect as resulting to an addition operation. Parameters:
c o l o r 1 : A color object to act as the minuend. c o l o r 2 : A color object to act as the subtrahend.

Returns: c o l o r Example:
n e g a t i o n ( # f f 6 6 0 0 ,# 0 0 0 0 0 0 ) ;

n e g a t i o n ( # f f 6 6 0 0 ,# 3 3 3 3 3 3 ) ;

n e g a t i o n ( # f f 6 6 0 0 ,# 6 6 6 6 6 6 ) ;

n e g a t i o n ( # f f 6 6 0 0 ,# 9 9 9 9 9 9 ) ;

n e g a t i o n ( # f f 6 6 0 0 ,# c c c c c c ) ;

n e g a t i o n ( # f f 6 6 0 0 ,# f f f f f f ) ;

n e g a t i o n ( # f f 6 6 0 0 ,# f f 0 0 0 0 ) ;

n e g a t i o n ( # f f 6 6 0 0 ,# 0 0 f f 0 0 ) ;

n e g a t i o n ( # f f 6 6 0 0 ,# 0 0 0 0 f f ) ;

Changes

1.5.0
Under the hood less changed quite a bit (e.g. nodes no longer have a toCSS function), but we havent made any breaking changes to the language. These are highlights, so please see the changelog for a full list of changes. In usage, we do no longer support the yui-compress option due to a bug in ycssmin which was not getting fixed. We have switched to clean-css. If you use this option it will use clean-css and output a warning. The new option is called clean-css. We now have sourcemap support, meaning you can compile your less and then use developer tools to see where in your less file a particular piece of css comes from. You can enable this with the sourcemap=filename option. There are other options, help is available if you run lessc without arguments. For instance, if you use the source-map-less-inline source-map-map-inline options then your sourcemap and

all less files will be embedded into your generated css file. You can now import your css files into the output by doing
@ i m p o r t( i n l i n e )" f i l e . c s s " ;

This will not make selectors available to your less, it will just blindly copy that file into the output. It will not be compressed unless you use the clean-css option. We have another import option - reference. This means that any variables or mixins or selectors will be imported, but never output. e.g. if you have
. a{ c o l o r :g r e e n ; }

in a file and import it

@ i m p o r t( r e f e r e n c e )" f i l e . l e s s " ;

then that file will not be output, but you could do

. b{ . a ; }

and color: green; would be output inside the .b selector only. This also works with extends, so you can use extends to bring complex selector groups from a less or css file into your main file. One use-case might be to grab a set of selectors from bootstrap without including the whole library. We now have property merging, meaning you can do this
. a ( ){ t r a n s f o r m + :r o t a t e X ( 3 0 d e g ) ; } . b{ t r a n s f o r m + :r o t a t e Y ( 2 0 d e g ) ; . a ( ) ; }

and you will get

. b{ t r a n s f o r m :r o t a t e Y ( 2 0 d e g ) ,r o t a t e X ( 3 0 d e g ) ; }

Note: although convention is to space seperate we believe all browsers support comma seperated for transform and other properties where this is useful are comma seperated, so the feature always comma

seperates joined values. And lastly.. you can now put guards on css selectors. so instead of doing this
. a ( )w h e n( @ i e 8=t r u e ){ c o l o r :b l a c k ; } . a{ . a ; }

you can do this

. aw h e n( @ i e 8=t r u e ){ c o l o r :b l a c k ; }

which does the same thing. Note: this doesnt work with multiple selectors because of ambiguities between the guard syntax and css. You may also use & on its own to enclose multiple selectors e.g. instead of
. i e 8 ( )w h e n( @ i e 8=t r u e ){ . b{ c o l o r :w h i t e ; } / /. .e t c } . i e 8 ( ) ;

you can write.

&w h e n( @ i e 8=t r u e ){ . b{ c o l o r :w h i t e ; } / /. .e t c }

1.4.0
We have released 1.4.0. This includes new features such as extends, the data-uri function and more maths functions. See the changelog for a full list of changes. There are some known breaking changes.
@ i m p o r t o n c eis removed and is now default behaviour for @ i m p o r t . ( ~ " . m y c l a s s _ @ { i n d e x } " ){. . .selector interpolation is deprecated, do this instead . m y c l a s s _ @ { i n d e x } {. . . . This works in 1.3.1 onwards.

The browser version no longer bundles a version of es5-shim.js - the version we previously used was

inaccurate and the new version is significantly larger. Please include your choice of es-5 shim or only use on modern browsers. We have introduced a optional strictMath mode, where math is required to be in parenthesis, e.g.
( 1+1 ) / /2 1+1 / /1 + 1

In 1.4.0 this option is turned off, but we intend to turn this on by default. We recommend you upgrade code and switch on the option (strict-math=on in the command line or strictMath: true in JavaScript). Code written with brackets is backwards compatible with older versions of the less compiler. We also added a strict units option (strictUnits: true or strict-units=on) and this causes lessc to validate the units used are valid (e.g. 4px/2px = 2, not 2px and 4em/2px throws an error). There are no longer any plans to switch this option on permanently, but some users will find it useful for bug finding. Unit maths is done, so ( 4 p x*3 e m )/4 p xused to equal 3 p xand it now equals 3 e m . However we do not cancel units down to unitless numbers unless strict units is on. The selector interpolation, maths and units changes can be made to your less now and will compile fine with less 1.3.3.

In Other Languages
Chinese: http://lesscss.net Danish: http://lesscss.dk French: http://luckymarmot.com/lesscss German: http://lesscss.de Indonesian: http://bertzzie.com/post/7/dokumentasi-less-bahasa-indonesia Japanese: http://less-ja.studiomohawk.com/ Polish: http://ciembor.github.com/lesscss.org/ Portugese: http://giovanneafonso.github.io/lesscss.org/ Russian: http://lesscss.ru Spanish: http://amatellanes.github.io/lesscss.org/ Ukrainian: http://komaval.github.com/lesscss.org/ Belorussian: (Out of date) http://www.designcontest.com/show/lesscss-be

About
LESS was developed by Alexis Sellier, more commonly known as cloudhead. It is now mantained and extended by the LESS core team.

powered by LESS

Copy right Alexis Sellier 2 01 0-2 01 3