You are on page 1of 68

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. It’s 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. If you would like more involved minification. . Server-side usage Installation The easiest way to install LESS on the server. c s s To output minified CSS. as such: v a rl e s s=r e q u i r e ( ' 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 ' . the node package manager. simply pass the xoption. as so: $n p mi n s t a l lgl e s s Command-line usage Once installed. 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 . ' @ b u t t o n T e x t ' :' # D 9 E E F 2 ' } ) . as such: $l e s s cs t y l e s . the YUI CSS Compressor is also available with the y u i c o m p r e s soption. Debugging It is possible to output rules in your CSS which allow tools to locate the source of the rule. is via npm. Simple basic usage: l e s s . 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). you can invoke the compiler from the command-line. Usage in Code You can invoke the compiler from node. l e s s This will output the compiled CSS to s t d o u t . 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. To see all the command line options run lessc without parameters.

f u n c t i o n( e r r . ' ./ /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 . e r r o r ( e r r )} c o n s o l e . c l a s s{w i d t h :( 1+1 )} ' . l e s s '/ /S p e c i f yaf i l e n a m e . p a r s e ( ' . / l i b ' ] . Third Party Tools There are a selection of tools available to run in your particular environment and these are documented in the Github wiki. P a r s e r ) . t o C S S ( ) ) . p a r s e r . which will output .' .t r e e ){ i f( e r r ){r e t u r nc o n s o l e . r e n d e r ( ' . P a r s e r ) ( { p a t h s :[ ' .f u n c t i o n( e . t o C S S ( {c o m p r e s s :t r u e} ) . l o g ( c s s ) . p a r s e r . c l a s s{w i d t h :( 1+1 )} ' .t r e e ){ t r e e . c l a s s{ w i d t h :2 .c s s ){ c o n s o l e . } ) . 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 ( ' . } you may also manually invoke the parser and compiler: v a rp a r s e r=n e w ( l e s s . } ) ./ /M i n i f yC S So u t p u t } ) . l o g ( t r e e .f u n c t i o n( e .l e s s . c l a s s{w i d t h :( 1+1 )} ' .f o rb e t t e re r r o rm e s s a g e s } ) . Command Line Tools GUI Tools .

@ v a r :3 . # h e a d e r{c o l o r :@ l i g h t b l u e . " . Variables These are pretty self-explanatory: @ n i c e b l u e :# 5 B 8 3 A D . This is similar to css itself where the last property inside a definition is used to determine the value. but the extra features it adds use existing CSS syntax. lets you fall back to CSS. Which compiles to: c o n t e n t :" Ia mf n o r d . and if in doubt. } o n e :@ v a r . . @ v a r :' f n o r d ' . @ l i g h t b l u e :( @ n i c e b l u e+# 1 1 1 ) . searching from the current scope upwards. LESS is not only backwards compatible with CSS.The Language As an extension to CSS. When defining a variable twice. c l a s s{ @ v a r :2 . t h r e e :@ v a r . .} It is also possible to define variables with a variable name: @ f n o r d :" Ia mf n o r d . c l a s s 1{ @ v a r :1 . the last definition of the variable is used. . For instance: @ v a r :0 . c o n t e n t :@ @ v a r . This makes learning LESS a breeze.} Outputs: # h e a d e r{c o l o r :# 6 c 9 4 b e . " .

} @ v a r :@ a . } . this is valid less too: . } @ v a r :@ a . b o r d e r b o t t o m :s o l i d2 p xb l a c k . 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 . c l a s s 1{ o n e :1 . c l a s s{ t h r e e :3 . } Mixins In LESS. c l a s s 1. it is possible to include a bunch of properties from one ruleset into another ruleset.} Compiles to: . } . l a z y e v a l s c o p e{ w i d t h :@ v a r . @ a :1 0 0 % . So say we have the following class: . } Variables are lazy loaded and do not have to be declared before being used. l a z y e v a l s c o p e{ w i d t h :9 % . Valid less snippet: l a z y e v a l{ w i d t h :@ v a r . both compile into: . @ a :9 % . @ a :9 % .

} . } The properties of the .And we want to use these properties inside other rulesets. Note: Variables are also mixed in. b o r d e r e d . p o s ta{ c o l o r :r e d . This is contentious and may change in the future. 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 . Well. Here’s the canonical example: . b o r d e r b o t t o m :s o l i d2 p xb l a c k . b o r d e r r a d i u s :@ r a d i u s . } Any CSS class or id ruleset can be mixed-in that way. so variables from a mixin will be placed into the current scope. . . we just have to drop in the name of the class in any ruleset we want to include its properties. p o s ta{ c o l o r :r e d . } And here’s how we can mix it into various rulesets: # h e a d e r{ . b o r d e r t o p :d o t t e d1 p xb l a c k . 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 ){ m o z b o r d e r r a d i u s :@ r a d i u s . } . b u t t o n{ . but accepts parameters. b o r d e r r a d i u s ( 4 p x ) . 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 . like so: # m e n ua{ c o l o r :# 1 1 1 . Parametric Mixins LESS has a special type of ruleset which can be mixed in like classes.

For example: . b o r d e r r a d i u s :@ r a d i u s . w o r d w r a p :b r e a k w o r d . b o r d e r r a d i u s . } Parametric mixins can also have default values for their parameters: . If the compiler sees at least one semicolon inside mixin call or declaration. } p r e{. 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 r a p} Which would output: p r e{ t e x t w r a p :w r a p . You can also use parametric mixins which don’t take parameters. it assumes that arguments are separated by semicolons.. All commas then belong to css lists. This is useful if you want to hide the ruleset from the CSS output. w h i t e s p a c e :m o z p r e w r a p . b o r d e r r a d i u s ( 6 p x ) . The symbol comma has double meaning: it can be interpreted either as a mixin parameters separator or as css list separator. } Mixins With Multiple Parameters Parameters are either semicolon or comma separated. w o r d w r a p :b r e a k w o r d . } And it will include a 5px border-radius. but want to include its properties in other rulesets: . Semicolon does not have such limitation. } We can invoke it like this now: # h e a d e r{ . w e b k i t b o r d e r r a d i u s :@ r a d i u s . 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 . Using comma as mixin separator makes it impossible to use comma separated list as an argument. It is recommended to use semicolon. w h i t e s p a c e :p r e w r a p . w h i t e s p a c e :p r e w r a p .

m i x i n ( @ c o l o r ){ c o l o r 1 :@ c o l o r .3 ) . ) .@ y :0 . comma separated default value: .@ 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 . n a m e ( 1 . s o m e.b l u e .e l s e ) . 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 . . For example. three arguments and each contains one number: .3 .2 . .2 . n a m e ( @ p a r a m 1 :r e d . it contains all the arguments passed. } . p a d d i n g 2 :@ p a d d i n g .two arguments and each contains comma separated list: .5 p x ) .@ b l u r :1 p x . b o x s h a d o w ( 2 p x . s o m e. then properties of all mixins with exactly one mandatory parameter will be used: . use dummy semicolon to create mixin call with one argument containing comma separated css list: . c o l o r 2 :# 0 0 8 0 0 0 .2 . Less will use properties of all that can apply.@ p a d d i n g . } . if you used the mixin with one parameter e. s e l e c t o rd i v{ c o l o r 1 :# 0 0 8 0 0 0 . p a d d i n g 2 :2 . w e b k i t b o x s h a d o w :@ a r g u m e n t s . } . when the mixin was called. m i x i n ( @ c o l o r . } . n a m e ( 1 .3 .s o m e t h i n g . . This is useful if you don’t want to deal with individual parameters: . s e l e c t o rd i v{ . b o x s h a d o w( @ x :0 . } compiles into: . m i x i n ( g r e e n ) . m i x i n ( @ c o l o r . m i x i n ( # 0 0 8 0 0 0 ) .@ m a r g i n :2 ){ c o l o r 3 :@ c o l o r .g. p a d d i n g 3 :@ p a d d i n g . n a m e ( 1 . 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 . b o x s h a d o w :@ a r g u m e n t s . It is legal to define multiple mixins with the same name and number of parameters. } The @ a r g u m e n t svariable @ a r g u m e n t shas a special meaning inside mixins.@ p a d d i n g : 2 ){ c o l o r 2 :@ c o l o r . ) .

. .. m i x i n( @ a . @ 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 . m i x i n( @ a . m i x i n ( ){ @ g l o b a l :i n m i x i n . } . ){ . } . . } @ g l o b a l :o u t e r s c o p e . m i x i n( ){ .@ r e s t . ){ / /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( . m i x i n ( ) . . . Only variables not present in callers local scope are copied. . . ){ / /@ 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. @ l o c a l :i n m i x i n . m i x i n( @ a :1 . ..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 ./ / 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 a t c h e s0 Na r g u m e n t s Furthermore: . 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 . Returned variables never rewrite callers local variables. b o x s h a d o w :2 p x5 p x1 p x# 0 0 0 . . m i x i n( @ a :1 ){ . Using this after a variable name will assign those arguments to the variable./ /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: . Variable defined in mixin acts as return value: . . Advanced arguments and the @ r e s tvariable You can use . .if you want your mixin to take a variable number of arguments. .

i m p o r t a n t{ . mixins are unlocked even if the local scope contains mixin with the same name. u n l o c k ( 5 ) . } Unlocked mixins are available only after they have been unlocked. m i x i n( @ a :0 ){ b o r d e r :@ a . s e l e c t o r{ d e c l a r a t i o n :5 . u n i m p o r t a n t{ . } . d o S o m e t h i n g ( ) ./ /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 n d e c l a r a t i o n :@ v a l u e . There is no scope protection. m i x i n ( 1 ) . } .Unlocking Mixins Mixins defined in mixin are also usable in caller. u n l o c k ( @ v a l u e ){/ /o u t e rm i x i n ./ / 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: . u n l o c k ( 5 ) . d o S o m e t h i n g ( ) . Following would throw syntax error: . b o x e r :@ a ./ /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: . } compiled into: . s e l e c t o r{ . } } ./ /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 . . m i x i n ( 2 )! i m p o r t a n t .

@ c o l o r ){.# 8 8 8 ) . m i x i n( d a r k . } . we could define . m i x i n ( @ s w i t c h . b o x e r :1 . } . m i x i n( @ _ .@ c o l o r ){ d i s p l a y :b l o c k .# 8 8 8 ) . } We will get the following CSS: . . } . } Pattern-matching and Guard expressions Sometimes. m i x i n( l i g h t . Let’s start with something basic: . based on the parameters you pass to it. you may want to change the behaviour of a mixin. m i x i nto behave differently.@ c o l o r ){ c o l o r :d a r k e n ( @ c o l o r . . if we run: @ s w i t c h :l i g h t . based on the value of @ s w i t c h .} . c l a s s{ . m i x i n ( @ s w i t c h .1 0 % ) . c l a s s{ .. m i x i n( @ s . b o x e r :2! i m p o r t a n t . } Now.1 0 % ) . . .@ c o l o r ){ c o l o r :l i g h t e n ( @ c o l o r . c l a s s{ c o l o r :# a 2 a 2 a 2 . u n i m p o r t a n t{ b o r d e r :1 . m i x i n as such: . } Now let’s say we want . d i s p l a y :b l o c k . 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 .

Guards Guards are useful when you want to match on expressions.@ b ) . m i x i n ( # 5 5 5 )} . but if we call it with two arguments. in the vein of @ m e d i aquery feature specifications. } Now if we call . Here’s what happened: The first mixin definition didn’t match because it expected d a r kas the first argument. as opposed to simple values or arity. Variables match and bind to any value. If the value of @ s w i t c hwas d a r k . } The key is the w h e nkeyword. we will get the output of the first definition. In trying to stay as close as possible to the declarative nature of CSS. Now if we run the following code: . LESS has opted to implement conditional execution via guarded mixins instead of if/else statements. because it expected l i g h t . 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 nwas lightened. The third mixin definition matched because it expected any value. m i x i nwith a single argument. } . m i x i n ( # d d d )} . you have probably encountered them already. c l a s s 2{. 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 . c l a s s 1{. The second mixin definition matched. namely @ afaded to @ b .@ b ){ c o l o r :f a d e ( @ a . } . m i x i n( @ a ){ c o l o r :@ a .} Where the color passed to . which introduces a guard sequence (here with only one guard). m i x i n( @ a ){ c o l o r :@ a . the result would be a darker color. Let’s start with an example: . we will get the second definition. If you are familiar with functional programming. Only mixin definitions which matched were used. m i x i n( @ a . } . here’s an example: . Anything other than a variable matches only with a value equal to itself. We can also match on arity.

or with non-arguments: @ m e d i a :m o b i l e . .} Any value other than the keyword t r u eis falsy: . the keyword t r u eis the only truthy value. . making these two mixins equivalent: . m i x i n( @ a .} . m i x i n( @ a )w h e n( @ m e d i a=d e s k t o p ){. ./ /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 . t r u t h ( 4 0 ) . } Guards can be separated with a comma ‘. . . c o l o r :# 5 5 5 .} .} .@ b :b l a c k )w h e n( i s c o l o r ( @ b ) ){. ’–if any of the guards evaluates to true. 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 . . Additionally. m i x i n( @ a )w h e n( @ a>1 0 ) . t r u t h( @ a )w h e n( @ a ){.} .@ b )w h e n( @ a<@ b ){w i d t h :@ b} Lastly. it’s considered as a match: .} Here are the basic type checking functions: i s c o l o r i s n u m b e r . c l a s s{ . t r u t h( @ a )w h e n( @ a=t r u e ){. 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 . m i x i n( @ a )w h e n( @ m e d i a=m o b i l e ){. c o l o r :# d d d . . . m a x( @ a . } .@ b :0 )w h e n( i s n u m b e r ( @ b ) ){. . . .( @ a<1 0 ){. .Here’s what we’ll get: . . you can use the is* functions: . .} Note that you can also compare arguments with each other. } The full list of comparison operators usable in guards are: > > === << . if you want to match mixins based on value type. m a x( @ a . m i x i n( @ a .@ b )w h e n( @ a>@ b ){w i d t h :@ a} . .

n a v i g a t i o n{ f o n t s i z e :1 2 p x .} Nested rules LESS gives you the ability to use nesting instead of. m i x i n( @ b )w h e nn o t( @ b>0 ){. . } # h e a d e r. } # h e a d e r. in addition to being a number. .} And the n o tkeyword to negate conditions: . & : h o v e r{t e x t d e c o r a t i o n :n o n e} } } . is in a specific unit. n a v i g a t i o n{ f o n t s i z e :1 2 p x . 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 . l o g o{ w i d t h :3 0 0 p x . . we can also write it this way: # h e a d e r{ c o l o r :b l a c k . 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. } In LESS. . m i x i n( @ a )w h e n( i s n u m b e r ( @ a ) )a n d( @ a>0 ){.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. 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 . you may use the a n dkeyword to provide additional conditions inside a guard: .} # h e a d e r. } . l o g o{ w i d t h :3 0 0 p x .

Notice the &combinator . f l o a t{ f l o a t :l e f t . } . b o r d e r e d . instead of acting as a descendant. {w i d t h :3 0 0 p x .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 . @ m e d i ap r i n ta n dc o l o r{ c o l o r :b l u e . For example: . t o p{ m a r g i n :5 p x . } . 2 e m . and mimics the structure of your D O Mt r e e . f l o a t{ f l o a t :l e f t .Or this way: # h e a d e r . {t e x t d e c o r a t i o n :n o n e} . t o p{ m a r g i n :5 p x . This is especially important for pseudo-classes like : h o v e rand : f o c u s . } Nested Media Queries Media queries can be nested in the same way as selectors e. . l o g o & : h o v e r } } {c o l o r :b l a c k .it’s used when you want a nested selector to be concatenated to its parent selector. } } } . b o r d e r e d. 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. } } Will output . b o r d e r e d{ & .

LESS supports extending a style. Extend As of version 1. Instead of adding all the properties of a mixed-in class into a class. s i b l i n g{ c o l o r :r e d . 2 e m . . p a r e n t. c h i l d . o n e{ c o l o r :b l u e . } . s i b l i n g+. s i b l i n g{ c o l o r :b l a c k . . } } @ 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{ . Extend is sort of like the opposite of a mixin. c h i l d+. p a r e n t. p a r e n t&{ c o l o r :b l a c k . } } Will output . it adds the extending selector to the selector list for .. c h i l d+. o n e{ f o n t s i z e :1 . . s i b l i n g .Will output @ m e d i a( w i d t h :4 0 0 p x ){ . . c h i l d . } &+&{ c o l o r :r e d . c h i l d . c h i l d . } You can also use & in mixins in order to reference nesting that is outside of your mixin.4. s i b l i n g+. For example: . s i b l i n g{ . } } Advanced Usage of & The & symbol can be used in selectors in order to reverse the ordering of the nesting and to multiply classes.

c{ c o l o r :o r a n g e . } As you may have noticed. } . For example: . b . and can be combined with pseudo-classes as long as any extends selectors come last. t e s t{ & : h o v e r{ c o l o r :g r e e n . extend does not include nested elements of the extended style. The extend selector can be used on the same line as the class selector. . } p { c o l o r :# 1 0 1 0 1 0 . t e s t . } . or it can be nested as seen in this example: . To do this. } . 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 . } By default. t e s t . p a r e n t ) . The syntax for extend is designed to mimic the syntax of CSS pseudo-classes. this can significantly remove the amount of bloat in the output CSS compared to mixins. p { 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 . you must add a l lto the selector in the extend expression. p a r e n t{ f o n t s i z e : 1 2 p t . } Will output d i v . a . c h i l d{ & : e x t e n d ( .output of the extended class.

} . t e s ta l l ){ } Outputs: . } . t e s t . r e p l a c e m e n t . c{ c o l o r :o r a n g e . c . t e s t . t e s t : h o v e r . t e s t . . . } . c{ c o l o r :o r a n g e . b . Operations should be performed within parentheses. 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 . } But this: . t e s t . b . t e s t{ & : h o v e r{ c o l o r :g r e e n . } } . b . a . . a . r e p l a c e m e n t . r e p l a c e m e n t: e x t e n d ( . Here are a couple of examples: @ b a s e :5 % . t e s t ){ } Outputs: . c{ c o l o r :o r a n g e .} . b . . a . . t e s t . a . . color or variable can be operated on. } Operations Any number. t e s t : h o v e r{ c o l o r :g r e e n . . t e s t . r e p l a c e m e n t: e x t e n d ( .

c o l o r :( # 8 8 8/4 ) . If a unit is used in an operation./ /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 . } Namespaces Sometimes. The output is pretty much what you expect—LESS understands the difference between colors and units. 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 ) . c l a s s{ w i d t h :p e r c e n t a g e ( 0 . 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 . . h e i g h t :( 1 0 0 %/2+@ f i l l e r ) . b o r d e r :1 p xs o l i db l a c k .5 to 50%. They are documented fully in the function reference. for later re-use. like in: @ v a r :( 1 p x+5 ) .5 % ) . Using them is pretty straightforward. 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 . 5 . @ o t h e r :( @ b a s e+@ f i l l e r ) . LESS will use that unit for the final output—6 p xin this case. The following example uses percentage to convert 0. or for distributing: # b u n d l e{ . or just to offer some encapsulation. .2 5 % ) . You can do this pretty intuitively in LESS—say you want to bundle some mixins and variables under # b u n d l e . for organizational purposes.8 ) . Functions LESS provides a variety of functions which transform colors. manipulate strings and do maths.@ f i l l e r :( @ b a s e*2 ) . b u t t o n( ){ d i s p l a y :b l o c k . you may want to group your variables or mixins. Extra parentheses are also authorized in operations: w i d t h :( ( @ v a r+5 )*2 ) . 5 ) . @ w i d t h :0 .

/ /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>. . } } # n a m e s p a c e ( ){ . d o S o m e t h i n g ( ) . . } Scope Scope in LESS is very similar to that of programming languages. @ v a r :r e d . Since nested mixins act as return values. u n l o c k ( @ v a l u e ){/ /o u t e rm i x i n . & : 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} } . . } You can “unlock” nested mixins into namespace by calling their owner mixin. and so on. # b u n d l e>. # h e a d e r{ . c i t a t i o n{.} } Now if we want to mixin the . the compiler will look in the parent scope. and if they aren’t found. u n l o c k ( 5 ) .b a c k g r o u n d c o l o r :g r e y . 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 . we can do: # h e a d e ra{ c o l o r :o r a n g e . t a b{. b u t t o nclass in our # h e a d e ra . b u t t o n ./ /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 . Variables and mixins are first looked up locally. .} . # p a g e{ @ v a r :w h i t e . all nested mixins are copied into namespace and available from there: .

Importing and imported files share all mixins. 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 . right after @charset declarations. c l a s s{c o l o r :w h i t e} Importing You can import both CSS and LESS files. c s s ? u r l P a r a m e t e r = 2 3 " . If you want to import a CSS file. Only LESS files import statements are processed. c l a s s{c o l o r :b l a c k} Single-line comments are also valid in LESS. c s s " . c s sextension: @ i m p o r t" l i b .c o l o r :@ v a r .} @ 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 .I ' maC S S s t y l ec o m m e n t* / . . just use the . namespaces./ /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 . CSS file import statements are kept as they are.I ' mas i l e n tc o m m e n t . they don’t show up in the compiled CSS output: / /H i . but they are ‘silent’. variables and other structures. Input file with import statement: h 1{c o l o r :g r e e n . and don’t want LESS to process it. Compilation makes only one change to CSS file imports: top level CSS file imports are moved on top of the sheet. h 1{c o l o r :g r e e n .Iw o n ' ts h o wu pi ny o u rC S S .} Content of imported LESS file is copied into importing style sheet and compiled together with it. c s s ? u r l P a r a m e t e r = 2 3 " .

Import into ruleset: p r e{ @ i m p o r t" l i b r a r y .In addition.less” have been copied into the p r eruleset: p r e{ c o l o r :# f f 0 0 0 0 . 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 . } both variable and ruleset defined in “library./ /i m p o r tw i t h o u tm e d i aq u e r i e s ./ /v a r i a b l ed e f i n e di nl i b r a r y . c l a s s{ c o l o r :@ i m p o r t e d C o l o r .} } / /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 . mixins or other LESS structures. l e s s " .} Main file imports the above library. 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 ) .} . c o l o r :@ i m p o r t e d C o l o r . if the import statement has media queries specified in it. imported content is enclosed in the @ M e d i adeclaration. Imported “library. 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 . } LESS file import statement does not have to be located on top of the style sheet.less”: @ i m p o r t e d c o l o r :r e d . l e s s " ./ /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 . 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 . It can be placed also inside rulesets.less file: @ i m p o r t" l i b r a r y ./ /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 . } . h 1{c o l o r :g r e e n .

we place it inside a string prefixed with ~ . String interpolation Variables can be embedded inside strings in a similar way to Ruby or PHP. f n o r d . with the @ { n a m e }construct: @ b a s e u r l :" h t t p : / / a s s e t s . To output such value. if the file name has no extension or parameters.4. The second file is ignored.0 .less”. Will import the lib.. 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 .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 .0 @ i m p o r t o n c ehas been removed and @ i m p o r timports once by default. l e s s " . In v1. This means that with the following @import “file.less”. and @ i m p o r t( l e s s )" l i b . In v1.3. @ i m p o r t" l i b " . Both of these are equivalent: @ i m p o r t" l i b . p n g " ) . @ i m p o r t" l i b " . none will be added.0 you can force a file to be interpreted as a particular type by specifying an option. If you specify a file is less and do not include an extension. c s s " . @import “file.g. the “. Any file that does not end with . c o m " . for example: .4. Will output.v1. @ i m p o r t( c s s )" l i b " . Escaping Sometimes you might need to output a CSS value which is either not valid CSS syntax. e.3.In v1.less” suffix is added on the end. or uses proprietary syntax which LESS doesn’t recognize. c s sis considered less file and processed.css file and treat it as less. In addition.

@ m e d i as c r e e n .0. you can do this using the usual variable variable referencing syntax @ v a r i a b l e . Media Queries as Variables If you want to use less variables inside media. . c l a s s{ @ w h a t :" S t u f f " .. you can do this by referencing the variable using @ { s e l e c t o r }as in string interpolation. Support for this will be removed in 1.1 a ( ~ " @ { n a m e } " )type of selector was supported. 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 . @ { w h a t } ( ) " . 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 .@ s i n g l e Q u e r y{ s e t{ . } Escaped values can use the interpolation exactly the same way as strings: . } Selector Interpolation If you want to use LESS variables inside selectors. For example: @ n a m e :b l o c k e d . b l o c k e d{ c o l o r :b l a c k . @ { n a m e }{ c o l o r :b l a c k . S t u f f ( ) . } This is called an “escaped value”. S t u f f ( ) " . F o r . 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 ) " . } Note: prior to LESS 1. F o r . 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 . which will result in: . F o r . } will output .4.3.

We have plans to allow expanding the default functions available. without strict maths off. Becomes: @ v a r :" H E L L O ! " . @ v a r :~ ` " @ { s t r } " . b o d y . JavaScript evaluation JavaScript expressions can be evaluated as values inside . t o U p p e r C a s e ( )+' ! ' ` . 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. This would cause an error: @ m e d i as c r e e na n d@ p a r t i a l { . you may use the c o l o rfunction: .less files. In 1. It is also possible to access the JavaScript environment: @ h e i g h t :` d o c u m e n t . } } The variable must contain whole media query.p a d d i n g :3333 . Becomes: @ v a r :H E L L O ! .( m a x w i d t h :@ w i d t h ){ . However. this is done by wrapping the expression with back-ticks: @ v a r :` " h e l l o " .less. if you still want to use JavaScript in . c l i e n t H e i g h t ` . @ m e d i as c r e e n .4.g. try to think of a function that can be added to achieve the same purpose and ask for it on github. you can also include variables in media values. } } compiles into: @ m e d i as c r e e n .0. Note that you may also use interpolation and escaping as with strings: @ s t r :" h e l l o " .( m a x w i d t h :5 0 0 p x ){ s e t{ p a d d i n g :3333 . e. If you want to parse a JavaScript string as a hex color. t o U p p e r C a s e ( )+' ! ' ` .

g . 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 .@ b ) .u n i t s ) . m o d ( n u m b e r . % ( @ s t r i n g .n u m b e r ) . c o l o r s .@ e x p o n e n t ) . p o w ( @ b a s e .u n i t s ) .@ g . Function Reference Index e s c a p e ( @ s t r i n g ) . u n i t ( n u m b e r .@ s a t u r a t i o n . @ d a r k c o l o r :d a r k e n ( @ c o l o r .@ g .0 . d a t a u r i ( [ m i m e t y p e . c e i l ( @ n u m b e r ) ./ /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 ) .@ l i g h t n e s s . a b s ( n u m b e r ) . p i ( ) . h s v ( @ h u e .@ c o l o r :c o l o r ( ` w i n d o w .v a l u e s .[ p l a c e s :0 ] ) .@ b . / /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% . t a n ( n u m b e r ) . r g b a ( @ r .[ @ u n i t :" " ] ) . s i n ( n u m b e r ) .@ s a t u r a t i o n . .@ s a t u r a t i o n .@ a l p h a ) . a r g b ( @ c o l o r ) . s q r t ( n u m b e r ) . e ( @ s t r i n g ) . c o l o r ( s t r i n g ) . ) .@ v a l u e ) . .@ s a t u r a t i o n . b a s e C o l o r ` ) .@ v a l u e . c o s ( n u m b e r ) .@ a l p h a ) . a c o s ( n u m b e r ) . r g b ( @ r . r o u n d ( n u m b e r . f l o o r ( @ n u m b e r ) .@ a ) . a s i n ( n u m b e r ) . a t a n ( n u m b e r ) ./ /c r e a t e sac o l o r .1 0 % ) . ]u r l ) . c o n v e r t ( n u m b e r . / /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 .@ l i g h t n e s s ) . p e r c e n t a g e ( @ n u m b e r ) . h s v a ( @ h u e . h s l ( @ h u e .e .

s p i n ( @ c o l o r . m u l t i p l y ( @ c o l o r 1 . s o f t l i g h t ( @ c o l o r 1 .[ @ t h r e s h o l d :4 3 % ] ) .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 ) . i s c o l o r ( @ c o l o r O r A n y t h i n g ) . e x c l u s i o n ( @ c o l o r 1 . g r e e n ( @ c o l o r ) . b l u e ( @ c o l o r ) .@ c o l o r 2 ) .@ c o l o r 2 ) ./ /*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 .@ c o l o r 2 .@ c o l o r 2 ) .h u e ( @ c o l o r ) . l i g h t e n ( @ c o l o r . s a t u r a t i o n ( @ c o l o r ) . d i f f e r e n c e ( @ c o l o r 1 .@ c o l o r 2 ) ." r e m " ) .1 0 % ) . i s u r l ( @ u r l O r A n y t h i n g ) .[ @ w e i g h t :5 0 % ] ) .@ c o l o r 2 ) .5 0 % ) . n e g a t i o n ( @ c o l o r 1 .1 0 ) . o v e r l a y ( @ c o l o r 1 .1 0 % ) . a l p h a ( @ c o l o r ) .1 0 % ) . l u m a ( @ c o l o r ) . / /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 . 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 ) .1 0 % ) .@ c o l o r 2 ) . 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 . h s v h u e ( @ c o l o r ) . d a r k e n ( @ c o l o r . 4 . s a t u r a t e ( @ c o l o r .i n c l u d i n gk e y w o r d . t i n t ( @ c o l o r . i s p i x e l ( @ p i x e l O r A n y t h i n g ) . h s v v a l u e ( @ c o l o r ) . f a d e i n ( @ c o l o r . s h a d e ( @ c o l o r . s c r e e n ( @ c o l o r 1 .1 0 % ) . m i x ( @ c o l o r 1 . i s e m ( @ e m O r A n y t h i n g ) . g r e y s c a l e ( @ c o l o r ) . 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 ) . f a d e o u t ( @ c o l o r .[ @ l i g h t c o l o r :w h i t e ] . i s s t r i n g ( @ s t r i n g O r A n y t h i n g ) .1 0 % ) . h a r d l i g h t ( @ c o l o r 1 . l i g h t n e s s ( @ c o l o r ) .@ c o l o r 2 ) . i s u n i t ( @ n u m b e r O r A n y t h i n g .@ c o l o r 2 ) . 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 ) . r e d ( @ c o l o r ) . f a d e ( @ c o l o r .[ @ d a r k c o l o r :b l a c k ] .1 0 % ) .1 0 % ) .@ c o l o r 2 ) .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 . a v e r a g e ( @ c o l o r 1 . / /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 . 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 .

& .] . It can be used to output CSS value which is either not valid CSS syntax.{ . 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 .) . !and $ .@ . Following characters are exceptions and not encoded: . Parameters: s t r i n g : A string to escape Returns: escaped 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 .^ . .| . .# .. Current implementation returns u n d e f i n e don color and unchanged input on any other kind of argument. F o r .: .} . S t u f f ( ) .? . Parameters: s t r i n g : A string to escape Returns: s t r i n gcontent without quotes. Note: The function accepts also ~ " "escaped values and numbers as parameters. This behaviour should not be relied on and can change in the future. S t u f f ( ) " . 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.+ . Anything else returns an error.~ . or uses proprietary syntax which LESS doesn�t recognize. e CSS escaping similar to ~ " v a l u e "syntax.' .( . F o r ./ . but without quotes. .< . It expects string as a parameter and return its content as is.String functions escape Applies URL-encoding to special characters found in the input string. Most common encoded characters are: < s p a c e > .> . [and = .

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

Optional. Example: d a t a u r i ( ' . / d a t a / i m a g e . 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. If the mime is not given then node uses the mime package to determine the correct mime type. j p g ' ) . Output: . u r l : The URL of the file to inline. or if you use the function in the browser. Parameters: m i m e t y p e : A mime type string. 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.c o l o r ( " # a a a " ) . with or without a dimension u n i t : Optional: the unit to change to.

Math functions ceil Rounds up to the next highest integer.' . Parameters: n u m b e r : A floating point number. . . / d a t a / i m a g e . 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 = = ' ) . b a s e 6 4 ' . 6 ) . / d a t a / i m a g e . Example: d a t a u r i ( ' i m a g e / j p e g . Returns: i n t e g e r Example: c e i l ( 2 . 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: u r l ( ' d a t a : i m a g e / j p e g . 4 ) Output: 3 floor Rounds down to the next lowest integer. b a s e 6 4 . Parameters: n u m b e r : A floating point number.u r l ( ' d a t a : i m a g e / j p e g . j p g ' ) . Returns: i n t e g e r Example: f l o o r ( 2 . Output in the browser: u r l ( ' . j p g ' ) .

Parameters: n u m b e r : A floating point number. 5 ) Output: 5 0 % round Applies rounding.1 ) Output: 1 . Returns: s t r i n g Example: p e r c e n t a g e ( 0 . Defaults to 0.Output: 2 percentage Converts a floating point number into a percentage string. 6 7 ) Output: 2 Example: r o u n d ( 1 . d e c i m a l P l a c e s : Optional: The number of decimal places to round to. Returns: n u m b e r Example: r o u n d ( 1 . 7 . 6 7 . 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 . Keeps units as they are.sqrt Calculates square root of a number. 6 % ) Output: . 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 . 3 1 2 7 7 1 7 3 0 5 6 9 5 6 5 % . 6 % ) Output: 4 . Keeps units as they are. Parameters: n u m b e r : A floating point number. Parameters: n u m b e r : A floating point number. abs Calculates absolute value of a number.

1] interval.g./ /s i n eo f1g r a d i a n asin Calculates arcsine (inverse of sine) function.1 8 . Returns: n u m b e r Example: a s i n ( 0 ./ /s i n eo f1g r a d i a n Output: 0 . a number between -π/2 and π/2. Parameters: n u m b e r : A floating point number from [-1./ /s i n eo f1r a d i a n 0 . Parameters: n u m b e r : A floating point number. sin Calculates sine function. . 0 1 5 7 0 7 3 1 7 3 1 1 8 2 0 6 7 5 . Assumes radians on numbers without units. 0 1 7 4 5 2 4 0 6 4 3 7 2 8 3 5 1 . Assumes radians on numbers without units./ /s i n eo f1d e g r e e 0 . 8 4 1 4 7 0 9 8 4 8 0 7 8 9 6 5 . 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./ /s i n eo f1d e g r e e s i n ( 1 g r a d ) . Returns number in radians e. 6 % ./ /s i n eo f1r a d i a n s i n ( 1 d e g ) . Returns: n u m b e r Example: s i n ( 1 ) .

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 . Assumes radians on numbers without units. Parameters: n u m b e r : A floating point number. 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 . Returns: n u m b e r Example: . 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.Parameters: n u m b e r : A floating point number. 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. a number between 0 and π.g. 1] interval. Parameters: n u m b e r : A floating point number from [-1. Returns number in radians e. Returns: n u m b e r Example: a c o s ( 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. Parameters: none Returns: n u m b e r Example: p i ( ) Output: 3 . 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 . 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 ) . Returns number in radians e. Parameters: n u m b e r : A floating point number.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 . 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 . Returns: n u m b e r Example: a t a n ( 1 .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 . pi Returns π (pi).g. 1 4 1 5 9 2 6 5 3 5 8 9 7 9 3 . 5 2 5 3 7 3 r a d . a number between -π/2 and π/2.

0 p x ) p o w ( 2 5 . . n u m b e r : exponent . 0 0 1 6 5 N a N N a N % mod Returns the value of the first argument modulus second argument. 5 ) p o w ( 2 5 . the dimension of the second parameter is ignored. m o d ( 2 6 % . Output: N a N c m . 5 ) p o w ( 2 5 % . 5 ) Output: 1 c m 0 .0 p x ) m o d ( 1 1 c m . Returns: n u m b e r Example: p o w ( 0 c m . The function is able to handle also negative and floating point numbers.0 .pow Returns the value of the first argument raised to the power of the second argument. n u m b e r : a floating point number. Parameters: n u m b e r : a floating point number.0 . Returned value has the same dimension as the first parameter and the dimension of the second parameter is ignored.5 ) . Returned value has the same dimension as the first parameter. Returns: n u m b e r Example: m o d ( 0 c m . Parameters: n u m b e r : base -a floating point number.6 p x ) .a floating point number.2 ) p o w ( 2 5 .0 .

m m .d e g . * angle: r a d .p tand p c .m m ) c o n v e r t ( 8 . If both units are compatible.i n .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 . convert Converts numbers from one type into another. Parameters: n u m b e r : a floating point number with units. Only units are changed. Parameters: n u m b e r : a floating point number with units.5 c m 1 % . function returns first argument without modifying it.~ " m s " ) u n i t ( 9 . The function assumes that second parameter contains valid unit type. Compatible unit groups: * lengths: m . First argument contains number with units and second argument contains units. number itself is not converted.m ) Output: 9 m s .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." m s " ) c o n v e r t ( 1 4 c m . the number is converted.c m . i d e n t i f i e ror e s c a p e dv a l u e : units.g r a dand t u r n . If they are not compatible. Returns: n u m b e r Example: u n i t ( 9 s . i d e n t i f i e r . * time: sand m s .

for example # f f 0 0 0 0 .1 2 9 . Returns: c o l o r Example: r g b ( 9 0 . Literal color values in standard HTML/CSS formats may also be used to define colors. 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. Parameters: r e d : An integer 0-255 or percentage 0-100%. The input must contain color in hexadecimal or shorthand representation.9 m Color Converts a string or escaped value into a color. 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.3 2 ) Output: # 5 a 8 1 2 0 rgba . b l u e : An integer 0-255 or percentage 0-100%. g r e e n : An integer 0-255 or percentage 0-100%.

3 2 . 5 ) Output: r g b a ( 9 0 .Creates a transparent color object from decimal red. g r e e n : An integer 0-255 or percentage 0-100%.1 2 9 . b l u e : An integer 0-255 or percentage 0-100%.1 4 8 .2 3 . green. Output: # 8 0 5 a 1 7 9 4 hsl Creates an opaque color object from hue. Parameters: h u e : An integer 0-360 representing degrees. Returns: c o l o r Example: . 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 !). s a t u r a t i o n : A percentage 0-100% or number 0-1. 5 ) ) . saturation and lightness (HSL) values.3 2 .NET and Android development.1 2 9 . a l p h a : An number 0-1 or percentage 0-100%. Parameters: c o l o r : A color object. blue and alpha (RGBA) values. Returns: s t r i n g Example: a r g b ( r g b a ( 9 0 .0 . Returns: c o l o r Example: r g b a ( 9 0 . l i g h t n e s s : A percentage 0-100% or number 0-1. This format is used in Internet Explorer.0 . and . Parameters: r e d : An integer 0-255 or percentage 0-100%.0 .

Parameters: h u e : An integer 0-360 representing degrees. Returns: c o l o r Example: h s v ( 9 0 . 5 ) Output: r g b a ( 1 2 8 . hsla Creates a transparent color object from hue. a l p h a : A percentage 0-100% or number 0-1.0 .1 0 0 % . Returns: c o l o r Example: h s l ( 9 0 .9 0 % ) .5 0 % . 5 ) hsv Creates an opaque color object from hue. @ n e wwill have @ o l d ’s hue. and its own saturation and lightness. s a t u r a t i o n : A percentage 0-100% or number 0-1. for example: @ n e w :h s l ( h u e ( @ o l d ) .5 0 % ) .0 .1 0 0 % . Parameters: h u e : An integer 0-360 representing degrees. and is a color space available in Photoshop. 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. lightness and alpha (HSLA) values.4 5 % .1 0 0 % . l i g h t n e s s : A percentage 0-100% or number 0-1.0 .5 0 % ) Output: # 8 0 f f 0 0 This is useful if you want to create a new color based on another color’s channel. Note that this is not the same as h s l . saturation and value (HSV) values.2 5 5 .h s l ( 9 0 . saturation.

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.0 . s a t u r a t i o n : A percentage 0-100% or number 0-1. Returns: i n t e g e r0-360 Example: h u e ( h s l ( 9 0 .0 .5 0 % ) ) Output: 9 0 saturation Extracts the saturation channel of a color object. 5 ) Color channel information hue Extracts the hue channel of a color object.Output: # 4 0 8 0 0 0 hsva Creates a transparent color object from hue.0 .1 0 0 % .5 0 % . . value and alpha (HSVA) values.1 0 0 % . Returns: c o l o r Example: h s v a ( 9 0 . Parameters: c o l o r : A color object. 5 ) Output: r g b a ( 6 4 . Note that this is not the same as h s l a .1 2 8 . Parameters: h u e : An integer 0-360 representing degrees. saturation. and is a color space available in Photoshop.

Parameters: c o l o r : A color object. Parameters: c o l o r : A color object.5 0 % ) ) Output: 9 0 . 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 . 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: 1 0 0 % lightness Extracts the lightness channel of a color object.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.1 0 0 % .1 0 0 % . 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 .

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 .5 0 % ) ) Output: 1 0 0 % hsvvalue Extracts the value channel of a color object in the HSV color space.hsvsaturation Extracts the saturation channel of a color object in the HSV color space.5 0 % ) ) Output: 5 0 % red Extracts the red channel of a color object. Parameters: c o l o r : A color object.3 0 ) ) Output: .1 0 0 % . Returns: i n t e g e r0-255 Example: r e d ( r g b ( 1 0 . 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 . Parameters: c o l o r : A color object.1 0 0 % .2 0 . 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 . Parameters: c o l o r : A color object.3 0 .0 . Returns: i n t e g e r0-255 Example: b l u e ( r g b ( 1 0 .3 0 ) ) Output: 2 0 blue Extracts the blue channel of 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 .2 0 .1 0 green Extracts the green channel of a color object. Parameters: c o l o r : A color object.2 0 . 5 ) ) . Parameters: c o l o r : A color object.3 0 ) ) Output: 3 0 alpha Extracts the alpha channel of a color object.

so increasing a 10% value by 10% results in 20%. a m o u n t : A percentage 0-100%. and values are clamped to their allowed ranges. and percentage are handled as absolutes. 5 luma Calculates the luma) (perceptual brightness) of a color object. saturate Increase the saturation of a color by an absolute amount. not 11%.0.3 0 ) ) Output: 6 5 % Color operations Color operations generally take parameters in the same units as the values they are changing. Returns: c o l o r Example: s a t u r a t e ( h s l ( 9 0 . as recommended in WCAG 2.9 0 % . we’ve also shown formats that make it clear what each function has done. 709 coefficients.Output: 0 . This calculation is also used in the contrast function. Where return values are shown. Parameters: c o l o r : A color object. Parameters: c o l o r : A color object. they do not wrap around.1 0 % ) Output: .2 0 0 .5 0 % ) . Returns: p e r c e n t a g e0-100% Example: l u m a ( r g b ( 1 0 0 . in addition to the hex versions that you will usually be be working with. Uses SMPTE C / Rec.

Parameters: c o l o r : A color object.5 0 % ) desaturate Decrease the saturation of a color by an absolute amount.9 0 % . Returns: c o l o r . Returns: c o l o r Example: l i g h t e n ( h s l ( 9 0 .6 0 % ) darken Decrease the lightness of a color by an absolute amount. a m o u n t : A percentage 0-100%.1 0 0 % . Parameters: c o l o r : A color object.1 0 % ) Output: # 8 0 e 5 1 a/ /h s l ( 9 0 . Returns: c o l o r Example: d e s a t u r a t e ( h s l ( 9 0 .1 0 % ) Output: # 9 9 f 5 3 d/ /h s l ( 9 0 .5 0 % ) lighten Increase the lightness of a color by an absolute amount.# 8 0 f f 0 0/ /h s l ( 9 0 . Parameters: c o l o r : A color object.9 0 % .8 0 % .5 0 % ) .9 0 % . a m o u n t : A percentage 0-100%. a m o u n t : A percentage 0-100%.5 0 % ) .

5 ) .5 0 % . To fade in the other direction use f a d e o u t .9 0 % .9 0 % .0 . 5 ) .1 3 . Parameters: c o l o r : A color object.1 3 .2 4 2 .0 . Has no effect on opaque colours.0 .9 0 % .1 0 % ) Output: r g b a ( 1 2 8 .0 . making it more opaque.9 0 % . Parameters: c o l o r : A color object.5 0 % . 4 )/ /h s l a ( 9 0 . Returns: c o l o r Example: f a d e i n ( h s l a ( 9 0 .Example: d a r k e n ( h s l ( 9 0 .9 0 % .1 0 % ) Output: r g b a ( 1 2 8 .9 0 % .4 0 % ) fadein Decrease the transparency (or increase the opacity) of a color. Returns: c o l o r Example: f a d e o u t ( h s l a ( 9 0 . a m o u n t : A percentage 0-100%.5 0 % . 6 )/ /h s l a ( 9 0 . making it less opaque.1 0 % ) Output: # 6 6 c 2 0 a/ /h s l ( 9 0 .0 . 6 ) fadeout Increase the transparency (or decrease the opacity) of a color.5 0 % ) .2 4 2 . 6 ) fade . To fade in the other direction use f a d e i n .5 0 % . a m o u n t : A percentage 0-100%.0 .

2 0 ) s p i n ( h s l ( 1 0 .1 0 ) . Colors are always returned as RGB values. Parameters: c o l o r : A color object. a n g l e : A number of degrees to rotate (+ or -).2 4 2 . for example don’t do this: @ c :s a t u r a t e ( s p i n ( # a a a a a a . so applying s p i nto a grey value will do nothing.5 0 % ) . Note that colours are passed through an RGB conversion.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 3 . 1 ) spin Rotate the hue angle of a color in either direction.9 0 % . so you can pass in much larger (or negative) values and they will wrap around e.5 0 % ) # f 2 0 d 3 3/ /h s l ( 3 5 0 .Set the absolute transparency of a color.9 0 % .5 0 % ) .g. Can be applied to colors whether they already have an opacity value or not. Returns: c o l o r Example: s p i n ( h s l ( 1 0 . 1 )/ / h s l a ( 9 0 .5 0 % ) . Parameters: c o l o r : A color object.0 . a m o u n t : A percentage 0-100%. which doesn’t retain hue value for greys (because hue has no meaning when there is no saturation). While the angle range is 0-360. Returns: c o l o r Example: f a d e ( h s l ( 9 0 .9 0 % .1 0 % ) Output: r g b a ( 1 2 8 .9 0 % . angles of 360 and 720 will produce the same result. so make sure you apply functions in a way that preserves hue.9 0 % .5 0 % .2 0 ) Output: # f 2 7 f 0 d/ /h s l ( 3 0 .0 .5 0 % ) .1 0 % ) . it applies a mod 360 operation.9 0 % .1 0 ) .

which is also useful for accessibility compliance. Returns: c o l o r Example: m i x ( # f f 0 0 0 0 .5 0 % ) Output: # 8 0 0 0 8 0 r g b a ( 7 5 . 0 . Parameters: c o l o r 1 : A color object.9 0 % . 5 ) . .5 0 % ) contrast Choose which of two colors provides the greatest contrast with another. defaults to 50%.0 . 0 ) . This function works the same way as the contrast function in Compass for SASS. 0 . w e i g h t : Optional. Returns: c o l o r Example: g r e y s c a l e ( h s l ( 9 0 .5 0 % ) ) Output: # 8 0 8 0 8 0/ /h s l ( 9 0 . Opacity is included in the calculations.1 0 0 % ) . 0 . This is useful for ensuring that a color is readable against a background.2 5 .mix Mix two colors together in variable proportion. though they appear quite different in brightness to the human eye. 7 5 ) greyscale Remove all saturation from a color. Parameters: c o l o r : A color object. the resulting color mapping may be somewhat dull or muddy. 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 ' ) . Because the saturation is not affected by hue.0 . 0 . 1 . In accordance with WCAG 2.5 0 % ) m i x ( r g b a ( 1 0 0 .# 0 0 0 0 f f .0 % . c o l o r 1 : A color object. the same as calling d e s a t u r a t e ( @ c o l o r . 1 0 0 . a percentage balance point between the two colors.r g b a ( 0 . colors are compared using their luma value. not their lightness.0. l u m amay provide a better result as it extracts perceptual rather than linear brightness.

5 0 % ) .A designated dark color (defaults to black).5 0 % ) .1 0 0 % . # f f f f f f .A designated light color (defaults to white). Returns: c o l o r Examples: . for example to allow you to decide whether a 50% grey background should result in black or white text.# 1 0 1 0 1 0 ) c o n t r a s t ( # 2 2 2 2 2 2 . multiply Multiply two colors. # f f f f f f . 4 0 % ) . d a r k : optional .the function will calculate their luma values and assign light and dark appropriately. t h r e s h o l d : optional . Parameters: c o l o r : A color object to compare against.1 0 0 % . higher for ‘darker’ ones.# 1 0 1 0 1 0 . c o l o r 2 : A color object to multiply against. 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 . # 0 0 0 0 0 0 . Defaults to 43%. This is used to bias the contrast one way or another. Fireworks or GIMP. Parameters: c o l o r 1 : A color object to multiply against. The result is a darker color. You would generally set this lower for ‘lighter’ palettes. 6 0 % ) . l i g h t : optional . For each two colors their RGB channel are multiplied then divided by 255.# d d d d d d ) c o n t r a s t ( h s l ( 9 0 . so you can use them to make your CSS colors match your images.The light and dark parameters can be supplied in either order .A percentage 0-100% specifying where the transition from “dark” to “light” is (defaults to 43%). 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. # 0 0 0 0 0 0 . c o n t r a s t ( h s l ( 9 0 .

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 ) ;

# f f 0 0 0 0 ) . .# 3 3 3 3 3 3 ) . Returns: c o l o r Example: s o f t l i g h t ( # f f 6 6 0 0 . s o f t l i g h t ( # f f 6 6 0 0 .# 6 6 6 6 6 6 ) . c o l o r 2 : A color object to be soft lighten.o v e r l a y ( # f f 6 6 0 0 . o v e r l a y ( # f f 6 6 0 0 . s o f t l i g h t ( # 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. o v e r l a y ( # f f 6 6 0 0 .# 9 9 9 9 9 9 ) . and pure white resulting in pure white. Parameters: c o l o r 1 : A color object to soft light another. s o f t l i g h t ( # f f 6 6 0 0 .# 0 0 f f 0 0 ) .# 0 0 0 0 0 0 ) .

# f f f f f f ) . Parameters: c o l o r 1 : A color object to overlay another. 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 . Returns: c o l o r Example: h a r d l i g h t ( # f f 6 6 0 0 . s o f t l i g h t ( # f f 6 6 0 0 . c o l o r 2 : A color object to be overlayed.# 0 0 f f 0 0 ) . Also it is the determinant color to make the result lighter or darker.s o f t l i g h t ( # f f 6 6 0 0 .# f f 0 0 0 0 ) . 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. h a r d 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 . .# c c c c c c ) .# 0 0 0 0 f f ) .

# 0 0 f f 0 0 ) .h a r d l i g h t ( # f f 6 6 0 0 .# c c c c c c ) .# f f 0 0 0 0 ) . h a r d l i g h t ( # f f 6 6 0 0 . h a r d l i g h t ( # f f 6 6 0 0 . h a r d l i g h t ( # f f 6 6 0 0 .# 0 0 0 0 f f ) . h a r d l i g h t ( # f f 6 6 0 0 . Returns: c o l o r .# 6 6 6 6 6 6 ) . h a r d l i g h t ( # f f 6 6 0 0 . The operation is made per RGB channels. difference Substracts the second color from the first color. h a r d l i g h t ( # f f 6 6 0 0 .# 9 9 9 9 9 9 ) . c o l o r 2 : A color object to act as the subtrahend. Parameters: c o l o r 1 : A color object to act as the minuend.# f f f f f f ) . The result is a darker color.

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 ) .# 3 3 3 3 3 3 ) . d i f f e r e n c e ( # f f 6 6 0 0 . d i f f e r e n c e ( # f f 6 6 0 0 . 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 .Example: 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 .# 9 9 9 9 9 9 ) .# 6 6 6 6 6 6 ) . d i f f e r e n c e ( # f f 6 6 0 0 .# f f 0 0 0 0 ) .# 0 0 0 0 f f ) .

# 0 0 0 0 0 0 ) . e x c l u s i o n ( # f f 6 6 0 0 . e x c l u s i o n ( # f f 6 6 0 0 .# f f f f f f ) .# f f 0 0 0 0 ) .# 9 9 9 9 9 9 ) . c o l o r 2 : A color object to act as the subtrahend. Parameters: c o l o r 1 : A color object to act as the minuend. e x c l u s i o n ( # f f 6 6 0 0 . e x c l u s i o n ( # f f 6 6 0 0 . .# 6 6 6 6 6 6 ) .exclusion Similar effect to d i f f e r e n c ewith lower contrast. e x c l u s i o n ( # f f 6 6 0 0 . e x c l u s i o n ( # f f 6 6 0 0 . e x c l u s i o n ( # f f 6 6 0 0 . Returns: c o l o r Example: e x c l u s i o n ( # f f 6 6 0 0 .# c c c c c c ) .# 3 3 3 3 3 3 ) .# 0 0 f f 0 0 ) .

# c c c c c c ) . a v e r a g e ( # f f 6 6 0 0 .e x c l u s i o n ( # f f 6 6 0 0 .# 9 9 9 9 9 9 ) . . The operation is made per RGB channels. a v e r a g e ( # f f 6 6 0 0 .# 0 0 0 0 0 0 ) . average Compute the average of two colors. Returns: c o l o r Example: a v e r a g e ( # f f 6 6 0 0 . a v e r a g e ( # f f 6 6 0 0 . c o l o r 2 : A color object.# 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 ) . Parameters: c o l o r 1 : A color object. a v e r a g e ( # f f 6 6 0 0 .# 0 0 0 0 f f ) .# f f f f f f ) .

# f f 0 0 0 0 ) .# 9 9 9 9 9 9 ) .# 6 6 6 6 6 6 ) . n e g a t i o n ( # f f 6 6 0 0 .a v e r a g e ( # f f 6 6 0 0 . a v e r a g e ( # f f 6 6 0 0 .# 3 3 3 3 3 3 ) . The result is a brighter color. .# 0 0 f f 0 0 ) . Parameters: c o l o r 1 : A color object to act as the minuend. Returns: c o l o r Example: n e g a t i o n ( # f f 6 6 0 0 . Note: The opposite effect doesn’t mean the inverted effect as resulting to an addition operation.# 0 0 0 0 f f ) . negation Do the opposite effect from d i f f e r e n c e .# 0 0 0 0 0 0 ) . a v e r a g e ( # f f 6 6 0 0 . c o l o r 2 : A color object to act as the subtrahend. n e g a t i o n ( # f f 6 6 0 0 . 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 .5. we do no longer support the yui-compress option due to a bug in ycssmin which was not getting fixed.g. but we haven’t made any breaking changes to the language. You can enable this with the –sourcemap=filename option. help is available if you run lessc without arguments. 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.# 0 0 f f 0 0 ) . nodes no longer have a toCSS function). If you use this option it will use clean-css and output a warning.n e g a t i o n ( # f f 6 6 0 0 . There are other options. n e g a t i o n ( # f f 6 6 0 0 . For instance. We have switched to clean-css. We now have sourcemap support. if you use the –source-map-less-inline –source-map-map-inline options then your sourcemap and .# c c c c c c ) . n e g a t i o n ( # f f 6 6 0 0 .0 Under the hood less changed quite a bit (e. n e g a t i o n ( # f f 6 6 0 0 . The new option is called –clean-css. These are highlights.# f f f f f f ) . In usage. Changes 1. so please see the changelog for a full list of changes.# 0 0 0 0 f f ) .

meaning you can do this . This means that any variables or mixins or selectors will be imported. We now have property merging. so you can use extends to bring complex selector groups from a less or css file into your main file. 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 ) . It will not be compressed unless you use the clean-css option. would be output inside the . it will just blindly copy that file into the output. a{ c o l o r :g r e e n . but never output. 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 . } 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 .r o t a t e X ( 3 0 d e g ) . This will not make selectors available to your less.all less files will be embedded into your generated css file. } 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. This also works with extends. } and you will get . e.reference. then that file will not be output.g. but you could do . One use-case might be to grab a set of selectors from bootstrap without including the whole library. l e s s " . c s s " . if you have . a .b selector only. a ( ) . so the feature always comma . } and color: green. . } . b{ . We have another import option . b{ t r a n s f o r m + :r o t a t e Y ( 2 0 d e g ) .

@ i m p o r t o n c eis removed and is now default behaviour for @ i m p o r t . i e 8 ( )w h e n( @ i e 8=t r u e ){ .4.e t c } 1. } . } which does the same thing. a{ .0 We have released 1.0.3. ( ~ " . The browser version no longer bundles a version of es5-shim. There are some known breaking changes. . the data-uri function and more maths functions. you can now put guards on css selectors. You may also use & on its own to enclose multiple selectors e. See the changelog for a full list of changes. . you can write.selector interpolation is deprecated.4.the version we previously used was . do this instead .g. } you can do this . This includes new features such as extends. i e 8 ( ) . . a ( )w h e n( @ i e 8=t r u e ){ c o l o r :b l a c k .seperates joined values. m y c l a s s _ @ { i n d e x } {.e t c } . b{ c o l o r :w h i t e . . instead of . . &w h e n( @ i e 8=t r u e ){ . aw h e n( @ i e 8=t r u e ){ c o l o r :b l a c k . . } / /.1 onwards.. b{ c o l o r :w h i t e .js . a . } / /. m y c l a s s _ @ { i n d e x } " ){. . Note: this doesn’t work with multiple selectors because of ambiguities between the guard syntax and css. so instead of doing this . This works in 1. And lastly.

designcontest.net Danish: http://lesscss.io/lesscss. In Other Languages Chinese: http://lesscss. 4px/2px = 2. where math is required to be in parenthesis.org/ Belorussian: (Out of date) http://www. more commonly known as cloudhead.org/ Portugese: http://giovanneafonso.github.3. 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.com/post/7/dokumentasi-less-bahasa-indonesia Japanese: http://less-ja.de Indonesian: http://bertzzie.3. ( 1+1 ) / /2 1+1 / /1 + 1 In 1. e.com/lesscss. Code written with brackets is backwards compatible with older versions of the less compiler. The selector interpolation.github. powered by LESS .io/lesscss.org/ Ukrainian: http://komaval.inaccurate and the new version is significantly larger. not 2px and 4em/2px throws an error). Please include your choice of es-5 shim or only use on modern browsers. It is now mantained and extended by the LESS core team.ru Spanish: http://amatellanes.com/lesscss.github.com/lesscss German: http://lesscss.0 this option is turned off. However we do not cancel units down to unitless numbers unless strict units is on.g.com/ Polish: http://ciembor. maths and units changes can be made to your less now and will compile fine with less 1.g. Unit maths is done.org/ Russian: http://lesscss. but some users will find it useful for bug finding.studiomohawk.com/show/lesscss-be About LESS was developed by Alexis Sellier. so ( 4 p x*3 e m )/4 p xused to equal 3 p xand it now equals 3 e m .4. but we intend to turn this on by default.dk French: http://luckymarmot.github. We have introduced a optional strictMath mode. We recommend you upgrade code and switch on the option (–strict-math=on in the command line or strictMath: true in JavaScript). There are no longer any plans to switch this option on permanently.

Copy right © Alexis Sellier 2 01 0-2 01 3 .