Functions | Less.js

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