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 ...
Functions
LogicalFunctionsif
boolean
StringFunctionsescape
e
%format
replace
ListFunctionslength
extract
range
each
MathFunctionsceil
floor
percentage
round
sqrt
abs
sin
asin
cos
acos
tan
atan
pi
pow
mod
min
max
TypeFunctionsisnumber
isstring
iscolor
iskeyword
isurl
ispixel
isem
ispercentage
isunit
isruleset
isdefined
MiscFunctionscolor
image-size
image-width
image-height
convert
data-uri
default
unit
get-unit
svg-gradient
ColorDefinitionFunctionsrgb
rgba
argb
hsl
hsla
hsv
hsva
ColorChannelFunctionshue
saturation
lightness
hsvhue
hsvsaturation
hsvvalue
red
green
blue
alpha
luma
luminance
ColorOperationFunctionssaturate
desaturate
lighten
darken
fadein
fadeout
fade
spin
mix
tint
shade
greyscale
contrast
ColorBlendingFunctionsmultiply
screen
overlay
softlight
hardlight
difference
exclusion
average
negation
Functions
Built-infunctionssupportedbyLess.
LogicalFunctions
Editthemarkdownsourcefor"logical-functions"
if
Returnsoneoftwovaluesdependingonacondition.
Parameters:
condition:Abooleanexpression
value1:Avaluereturnedifconditionistrue.
value2:Avaluereturnedifconditionisnottrue.
Released:v3.0.0
Updated:v3.6.0
Examples:
@some:foo;
div{
margin:if((2>1),0,3px);
color:if((iscolor(@some)),@some,black);
}
Result:
div{
margin:0;
color:black;
}
Notes:AbooleanexpressionsupportedastheconditionalparameterarethesameasofGuardStatements.
if(not(true),foo,bar);
if((true)and(2>1),foo,bar);
if((false)or(isstring("boo!")),foo,bar);
Note:beforeLess3.6,theconditionrequiredasetofparentheses.
if(2>1,blue,green);//Causesanerrorin3.0-3.5.3
if((2>1),blue,green);//Ok3.6+
boolean
Evaluatestotrueorfalse
Youcan"store"abooleantestforlaterevaluationinaguardorif().
Parameters:
condition:Abooleanexpression
Released:v3.0.0
Updated:v3.6.0
Examples:
@bg:black;
@bg-light:boolean(luma(@bg)>50%);
div{
background:@bg;
color:if(@bg-light,black,white);
}
Result:
div{
background:black;
color:white;
}
StringFunctions
Editthemarkdownsourcefor"string-functions"
escape
AppliesURL-encodingtospecialcharactersfoundintheinputstring.
Thesecharactersarenotencoded:,,/,?,@,&,+,',~,!and$.
Mostcommonencodedcharactersare:\,#,^,(,),{,},|,:,>,
ColorDefinitionFunctions
Editthemarkdownsourcefor"color-definition"
rgb
Createsanopaquecolorobjectfromdecimalred,greenandblue(RGB)values.
LiteralcolorvaluesinstandardHTML/CSSformatsmayalsobeusedtodefinecolors,forexample#ff0000.
Parameters:
red:Aninteger0-255orpercentage0-100%.
green:Aninteger0-255orpercentage0-100%.
blue:Aninteger0-255orpercentage0-100%.
Returns:color
Example:rgb(90,129,32)
Output:#5a8120
rgba
Createsatransparentcolorobjectfromdecimalred,green,blueandalpha(RGBA)values.
Parameters:
red:Aninteger0-255orpercentage0-100%.
green:Aninteger0-255orpercentage0-100%.
blue:Aninteger0-255orpercentage0-100%.
alpha:Anumber0-1orpercentage0-100%.
Returns:color
Example:rgba(90,129,32,0.5)
Output:rgba(90,129,32,0.5)
argb
Createsahexrepresentationofacolorin#AARRGGBBformat(NOT#RRGGBBAA!).
ThisformatisusedinInternetExplorer,and.NETandAndroiddevelopment.
Parameters:color,colorobject.
Returns:string
Example:argb(rgba(90,23,148,0.5));
Output:#805a1794
hsl
Createsanopaquecolorobjectfromhue,saturationandlightness(HSL)values.
Parameters:
hue:Aninteger0-360representingdegrees.
saturation:Apercentage0-100%ornumber0-1.
lightness:Apercentage0-100%ornumber0-1.
Returns:color
Example:hsl(90,100%,50%)
Output:#80ff00
Thisisusefulifyouwanttocreateanewcolorbasedonanothercolor'schannel,forExample:@new:hsl(hue(@old),45%,90%);
@newwillhave@old'shue,anditsownsaturationandlightness.
hsla
Createsatransparentcolorobjectfromhue,saturation,lightnessandalpha(HSLA)values.
Parameters:
hue:Aninteger0-360representingdegrees.
saturation:Apercentage0-100%ornumber0-1.
lightness:Apercentage0-100%ornumber0-1.
alpha:Apercentage0-100%ornumber0-1.
Returns:color
Example:hsla(90,100%,50%,0.5)
Output:rgba(128,255,0,0.5)
hsv
Createsanopaquecolorobjectfromhue,saturationandvalue(HSV)values.
NotethatthisisacolorspaceavailableinPhotoshop,andisnotthesameashsl.
Parameters:
hue:Aninteger0-360representingdegrees.
saturation:Apercentage0-100%ornumber0-1.
value:Apercentage0-100%ornumber0-1.
Returns:color
Example:hsv(90,100%,50%)
Output:#408000
hsva
Createsatransparentcolorobjectfromhue,saturation,valueandalpha(HSVA)values.
Notethatthisisnotthesameashsla,andisacolorspaceavailableinPhotoshop.
Parameters:
hue:Aninteger0-360representingdegrees.
saturation:Apercentage0-100%ornumber0-1.
value:Apercentage0-100%ornumber0-1.
alpha:Apercentage0-100%ornumber0-1.
Returns:color
Example:hsva(90,100%,50%,0.5)
Output:rgba(64,128,0,0.5)
ColorChannelFunctions
Editthemarkdownsourcefor"color-channel"
hue
ExtractsthehuechannelofacolorobjectintheHSLcolorspace.
Parameters:color-acolorobject.
Returns:integer0-360
Example:hue(hsl(90,100%,50%))
Output:90
saturation
ExtractsthesaturationchannelofacolorobjectintheHSLcolorspace.
Parameters:color-acolorobject.
Returns:percentage0-100
Example:saturation(hsl(90,100%,50%))
Output:100%
lightness
ExtractsthelightnesschannelofacolorobjectintheHSLcolorspace.
Parameters:color-acolorobject.
Returns:percentage0-100
Example:lightness(hsl(90,100%,50%))
Output:50%
hsvhue
ExtractsthehuechannelofacolorobjectintheHSVcolorspace.
Parameters:color-acolorobject.
Returns:integer0-360
Example:hsvhue(hsv(90,100%,50%))
Output:90
hsvsaturation
ExtractsthesaturationchannelofacolorobjectintheHSVcolorspace.
Parameters:color-acolorobject.
Returns:percentage0-100
Example:hsvsaturation(hsv(90,100%,50%))
Output:100%
hsvvalue
ExtractsthevaluechannelofacolorobjectintheHSVcolorspace.
Parameters:color-acolorobject.
Returns:percentage0-100
Example:hsvvalue(hsv(90,100%,50%))
Output:50%
red
Extractstheredchannelofacolorobject.
Parameters:color-acolorobject.
Returns:float0-255
Example:red(rgb(10,20,30))
Output:10
green
Extractsthegreenchannelofacolorobject.
Parameters:color-acolorobject.
Returns:float0-255
Example:green(rgb(10,20,30))
Output:20
blue
Extractsthebluechannelofacolorobject.
Parameters:color-acolorobject.
Returns:float0-255
Example:blue(rgb(10,20,30))
Output:30
alpha
Extractsthealphachannelofacolorobject.
Parameters:color-acolorobject.
Returns:float0-1
Example:alpha(rgba(10,20,30,0.5))
Output:0.5
luma
Calculatestheluma(perceptualbrightness)ofacolorobject.
UsesSMPTEC/Rec.709coefficients,asrecommendedinWCAG2.0.Thiscalculationisalsousedinthecontrastfunction.
Beforev1.7.0thelumawascalculatedwithoutgammacorrection,usetheluminancefunctiontocalculatethese"old"values.
Parameters:color-acolorobject.
Returns:percentage0-100%
Example:luma(rgb(100,200,30))
Output:44%
luminance
Calculatesthevalueofthelumawithoutgammacorrection(thisfunctionwasnamedlumabeforev1.7.0)
Parameters:color-acolorobject.
Returns:percentage0-100%
Example:luminance(rgb(100,200,30))
Output:65%
ColorOperationFunctions
Editthemarkdownsourcefor"color-operations"
Coloroperationsgenerallytakeparametersinthesameunitsasthevaluestheyarechanging,andpercentagesarehandledasabsolutes,soincreasinga10%valueby10%resultsin20%.Settheoptionmethodparametertorelativeforrelativepercentages.Whenusingrelativepercentagesincreasinga10%valueby10%resultsin11%.Valuesareclampedtotheirallowedranges;theydonotwraparound.Wherereturnvaluesareshown,we'veusedformatsthatmakeitclearwhateachfunctionhasdone,inadditiontothehexversionsthatyouwillusuallybebeworkingwith.
saturate
IncreasethesaturationofacolorintheHSLcolorspacebyanabsoluteamount.
Parameters:
color:Acolorobject.
amount:Apercentage0-100%.
method:Optional,settorelativefortheadjustmenttoberelativetothecurrentvalue.
Returns:color
Example:saturate(hsl(90,80%,50%),20%)
Output:#80ff00//hsl(90,100%,50%)
➜
desaturate
DecreasethesaturationofacolorintheHSLcolorspacebyanabsoluteamount.
Parameters:
color:Acolorobject.
amount:Apercentage0-100%.
method:Optional,settorelativefortheadjustmenttoberelativetothecurrentvalue.
Returns:color
Example:desaturate(hsl(90,80%,50%),20%)
Output:#80cc33//hsl(90,60%,50%)
➜
lighten
IncreasethelightnessofacolorintheHSLcolorspacebyanabsoluteamount.
Parameters:
color:Acolorobject.
amount:Apercentage0-100%.
method:Optional,settorelativefortheadjustmenttoberelativetothecurrentvalue.
Returns:color
Example:lighten(hsl(90,80%,50%),20%)
Output:#b3f075//hsl(90,80%,70%)
➜
darken
DecreasethelightnessofacolorintheHSLcolorspacebyanabsoluteamount.
Parameters:
color:Acolorobject.
amount:Apercentage0-100%.
method:Optional,settorelativefortheadjustmenttoberelativetothecurrentvalue.
Returns:color
Example:darken(hsl(90,80%,50%),20%)
Output:#4d8a0f//hsl(90,80%,30%)
➜
fadein
Decreasethetransparency(orincreasetheopacity)ofacolor,makingitmoreopaque.
Hasnoeffectonopaquecolors.Tofadeintheotherdirectionusefadeout.
Parameters:
color:Acolorobject.
amount:Apercentage0-100%.
method:Optional,settorelativefortheadjustmenttoberelativetothecurrentvalue.
Returns:color
Example:fadein(hsla(90,90%,50%,0.5),10%)
Output:rgba(128,242,13,0.6)//hsla(90,90%,50%,0.6)
fadeout
Increasethetransparency(ordecreasetheopacity)ofacolor,makingitlessopaque.Tofadeintheotherdirectionusefadein.
Parameters:
color:Acolorobject.
amount:Apercentage0-100%.
method:Optional,settorelativefortheadjustmenttoberelativetothecurrentvalue.
Returns:color
Example:fadeout(hsla(90,90%,50%,0.5),10%)
Output:rgba(128,242,13,0.4)//hsla(90,90%,50%,0.4)
fade
Settheabsoluteopacityofacolor.Canbeappliedtocolorswhethertheyalreadyhaveanopacityvalueornot.
Parameters:
color:Acolorobject.
amount:Apercentage0-100%.
Returns:color
Example:fade(hsl(90,90%,50%),10%)
Output:rgba(128,242,13,0.1)//hsla(90,90%,50%,0.1)
spin
Rotatethehueangleofacolorineitherdirection.
Whiletheanglerangeis0-360,itappliesamod360operation,soyoucanpassinmuchlarger(ornegative)valuesandtheywillwraparounde.g.anglesof360and720willproducethesameresult.NotethatcolorsarepassedthroughanRGBconversion,whichdoesn'tretainhuevalueforgreys(becausehuehasnomeaningwhenthereisnosaturation),somakesureyouapplyfunctionsinawaythatpreserveshue,forexampledon'tdothis:
@c:saturate(spin(#aaaaaa,10),10%);
Dothisinstead:
@c:spin(saturate(#aaaaaa,10%),10);
ColorsarealwaysreturnedasRGBvalues,soapplyingspintoagreyvaluewilldonothing.
Parameters:
color:Acolorobject.
angle:Anumberofdegreestorotate(+or-).
Returns:color
Example:
spin(hsl(10,90%,50%),30)
spin(hsl(10,90%,50%),-30)
Output:
#f2a60d//hsl(40,90%,50%)
#f20d59//hsl(340,90%,50%)
➜
➜
mix
Mixtwocolorstogetherinvariableproportion.Opacityisincludedinthecalculations.
Parameters:
color1:Acolorobject.
color2:Acolorobject.
weight:Optional,apercentagebalancepointbetweenthetwocolors,defaultsto50%.
Returns:color
Example:
mix(#ff0000,#0000ff,50%)
mix(rgba(100,0,0,1.0),rgba(0,100,0,0.5),50%)
Output:
#800080
rgba(75,25,0,0.75)
+➜
tint
Mixcolorwithwhiteinvariableproportion.Itisthesameascallingmix(#ffffff,@color,@weight)
Parameters:
color:Acolorobject.
weight:Optional,apercentagebalancepointbetweencolorandwhite,defaultsto50%.
Returns:color
Example:
no-alpha:tint(#007fff,50%);
with-alpha:tint(rgba(00,0,255,0.5),50%);
Output:
no-alpha:#80bfff;
with-alpha:rgba(191,191,255,0.75);
➜
shade
Mixcolorwithblackinvariableproportion.Itisthesameascallingmix(#000000,@color,@weight)
Parameters:
color:Acolorobject.
weight:Optional,apercentagebalancepointbetweencolorandblack,defaultsto50%.
Returns:color
Example:
no-alpha:shade(#007fff,50%);
with-alpha:shade(rgba(00,0,255,0.5),50%);
Output:
no-alpha:#004080;
with-alpha:rgba(0,0,64,0.75);
➜
greyscale
RemoveallsaturationfromacolorintheHSLcolorspace;thesameascallingdesaturate(@color,100%).
Becausethesaturationisnotaffectedbyhue,theresultingcolormappingmaybesomewhatdullormuddy;lumamayprovideabetterresultasitextractsperceptualratherthanlinearbrightness,forexamplegreyscale('#0000ff')willreturnthesamevalueasgreyscale('#00ff00'),thoughtheyappearquitedifferentinbrightnesstothehumaneye.
Parameters:color:Acolorobject.
Returns:color
Example:greyscale(hsl(90,90%,50%))
Output:#808080//hsl(90,0%,50%)
➜
Noticethatthegeneratedgreylooksdarkerthantheoriginalgreen,eventhoughitslightnessvalueisthesame.
Comparewithusingluma(usageisdifferentbecauselumareturnsasinglevalue,notacolor):
@c:luma(hsl(90,90%,50%));
color:rgb(@c,@c,@c);
Output:#cacaca
➜
Thistimethegrey'slightnesslooksaboutthesameasthegreen,thoughitsvalueisactuallyhigher.
contrast
Choosewhichoftwocolorsprovidesthegreatestcontrastwithanother.
Thisisusefulforensuringthatacolorisreadableagainstabackground,whichisalsousefulforaccessibilitycompliance.ThisfunctionworksthesamewayasthecontrastfunctioninCompassforSASS.InaccordancewithWCAG2.0,colorsarecomparedusingtheirgamma-correctedlumavalue,nottheirlightness.
Thelightanddarkparameterscanbesuppliedineitherorder-thefunctionwillcalculatetheirlumavaluesandassignlightanddarkautomatically,whichmeansyoucan'tusethisfunctiontoselecttheleastcontrastingcolorbyreversingtheorder.
Parameters:
color:Acolorobjecttocompareagainst.
dark:optional-Adesignateddarkcolor(defaultstoblack).
light:optional-Adesignatedlightcolor(defaultstowhite).
threshold:optional-Apercentage0-100%specifyingwherethetransitionfrom"dark"to"light"is(defaultsto43%,matchingSASS).Thisisusedtobiasthecontrastonewayoranother,forexampletoallowyoutodecidewhethera50%greybackgroundshouldresultinblackorwhitetext.Youwouldgenerallysetthislowerfor'lighter'palettes,higherfor'darker'ones.
Returns:color
Example:
p{
a:contrast(#bbbbbb);
b:contrast(#222222,#101010);
c:contrast(#222222,#101010,#dddddd);
d:contrast(hsl(90,100%,50%),#000000,#ffffff,30%);
e:contrast(hsl(90,100%,50%),#000000,#ffffff,80%);
}
Output:
p{
a:#000000//black
b:#ffffff//white
c:#dddddd
d:#000000//black
e:#ffffff//white
}
Theseexamplesusetheabovecalculatedcolorsforbackgroundandforeground;youcanseethatyouneverendupwithwhite-on-white,norblack-on-black,thoughit'spossibletousethethresholdtopermitlower-contrastoutcomes,asinthelastexample:
ColorBlendingFunctions
Editthemarkdownsourcefor"color-blending"
Theseoperationsaresimilar(thoughnotnecessarilyidentical)totheblendmodesfoundinimageeditorslikePhotoshop,Fireworks,orGIMP,soyoucanusethemtomakeyourCSScolorsmatchyourimages.
multiply
Multiplytwocolors.CorrespondingRGBchannelsfromeachofthetwocolorsaremultipliedtogetherthendividedby255.Theresultisadarkercolor.
Parameters:
color1:Acolorobject.
color2:Acolorobject.
Returns:color
Examples:
multiply(#ff6600,#000000);
multiply(#ff6600,#333333);
multiply(#ff6600,#666666);
multiply(#ff6600,#999999);
multiply(#ff6600,#cccccc);
multiply(#ff6600,#ffffff);
multiply(#ff6600,#ff0000);
multiply(#ff6600,#00ff00);
multiply(#ff6600,#0000ff);
screen
Dotheoppositeofmultiply.Theresultisabrightercolor.
Parameters:
color1:Acolorobject.
color2:Acolorobject.
Returns:color
Example:
screen(#ff6600,#000000);
screen(#ff6600,#333333);
screen(#ff6600,#666666);
screen(#ff6600,#999999);
screen(#ff6600,#cccccc);
screen(#ff6600,#ffffff);
screen(#ff6600,#ff0000);
screen(#ff6600,#00ff00);
screen(#ff6600,#0000ff);
overlay
Combinestheeffectsofbothmultiplyandscreen.Conditionallymakelightchannelslighteranddarkchannelsdarker.Note:Theresultsoftheconditionsaredeterminedbythefirstcolorparameter.
Parameters:
color1:Abasecolorobject.Alsothedeterminantcolortomaketheresultlighterordarker.
color2:Acolorobjecttooverlay.
Returns:color
Example:
overlay(#ff6600,#000000);
overlay(#ff6600,#333333);
overlay(#ff6600,#666666);
overlay(#ff6600,#999999);
overlay(#ff6600,#cccccc);
overlay(#ff6600,#ffffff);
overlay(#ff6600,#ff0000);
overlay(#ff6600,#00ff00);
overlay(#ff6600,#0000ff);
softlight
Similartooverlaybutavoidspureblackresultinginpureblack,andpurewhiteresultinginpurewhite.
Parameters:
color1:Acolorobjecttosoftlightanother.
color2:Acolorobjecttobesoftlighten.
Returns:color
Example:
softlight(#ff6600,#000000);
softlight(#ff6600,#333333);
softlight(#ff6600,#666666);
softlight(#ff6600,#999999);
softlight(#ff6600,#cccccc);
softlight(#ff6600,#ffffff);
softlight(#ff6600,#ff0000);
softlight(#ff6600,#00ff00);
softlight(#ff6600,#0000ff);
hardlight
Thesameasoverlaybutwiththecolorrolesreversed.
Parameters:
color1:Acolorobjecttooverlay.
color2:Abasecolorobject.Alsothedeterminantcolortomaketheresultlighterordarker.
Returns:color
Example:
hardlight(#ff6600,#000000);
hardlight(#ff6600,#333333);
hardlight(#ff6600,#666666);
hardlight(#ff6600,#999999);
hardlight(#ff6600,#cccccc);
hardlight(#ff6600,#ffffff);
hardlight(#ff6600,#ff0000);
hardlight(#ff6600,#00ff00);
hardlight(#ff6600,#0000ff);
difference
Subtractsthesecondcolorfromthefirstcoloronachannel-by-channelbasis.Negativevaluesareinverted.Subtractingblackresultsinnochange;subtractingwhiteresultsincolorinversion.
Parameters:
color1:Acolorobjecttoactastheminuend.
color2:Acolorobjecttoactasthesubtrahend.
Returns:color
Example:
difference(#ff6600,#000000);
difference(#ff6600,#333333);
difference(#ff6600,#666666);
difference(#ff6600,#999999);
difference(#ff6600,#cccccc);
difference(#ff6600,#ffffff);
difference(#ff6600,#ff0000);
difference(#ff6600,#00ff00);
difference(#ff6600,#0000ff);
exclusion
Asimilareffecttodifferencewithlowercontrast.
Parameters:
color1:Acolorobjecttoactastheminuend.
color2:Acolorobjecttoactasthesubtrahend.
Returns:color
Example:
exclusion(#ff6600,#000000);
exclusion(#ff6600,#333333);
exclusion(#ff6600,#666666);
exclusion(#ff6600,#999999);
exclusion(#ff6600,#cccccc);
exclusion(#ff6600,#ffffff);
exclusion(#ff6600,#ff0000);
exclusion(#ff6600,#00ff00);
exclusion(#ff6600,#0000ff);
average
Computetheaverageoftwocolorsonaper-channel(RGB)basis.
Parameters:
color1:Acolorobject.
color2:Acolorobject.
Returns:color
Example:
average(#ff6600,#000000);
average(#ff6600,#333333);
average(#ff6600,#666666);
average(#ff6600,#999999);
average(#ff6600,#cccccc);
average(#ff6600,#ffffff);
average(#ff6600,#ff0000);
average(#ff6600,#00ff00);
average(#ff6600,#0000ff);
negation
Dotheoppositeeffecttodifference.
Theresultisabrightercolor.Note:Theoppositeeffectdoesn'tmeantheinvertedeffectasresultingfromanadditionoperation.
Parameters:
color1:Acolorobjecttoactastheminuend.
color2:Acolorobjecttoactasthesubtrahend.
Returns:color
Example:
negation(#ff6600,#000000);
negation(#ff6600,#333333);
negation(#ff6600,#666666);
negation(#ff6600,#999999);
negation(#ff6600,#cccccc);
negation(#ff6600,#ffffff);
negation(#ff6600,#ff0000);
negation(#ff6600,#00ff00);
negation(#ff6600,#0000ff);
