less-plugin-functions - npm

Write genuine Less functions in Less itself. ... This experimental "proof-of-concept" plugin extends Less with a possibility to define custom ... less-plugin-functions1.0.0 • Public • Published5yearsagoReadmeExploreBETA0Dependencies30Dependents2Versionsless-plugin-functions WritegenuineLessfunctionsinLessitself. Thisexperimental"proof-of-concept"pluginextendsLesswithapossibilitytodefinecustomfunctionsdirectlyinLessitselfandusethemjustlikeregularbuilt-infunctions. Definefoofunction: .function {    .foo(@x) {        return: @x * 2;    }} Useit: div {    width: foo(21em); // -> 42em } Installation npminstall-gless-plugin-functions Usage lessc--functionsfile.less FormoredetailsaboutusingpluginswiththecommandlineLesscompilersee thecorrespondingsection intheLessdocumentation. UsingwithcommonLesstools: grunt-contrib-less gulp-less FormoredetailsonaprogrammaticLesspluginusageseeUsingapluginincode. FeatureDetails CustomfunctionsrecognizablebythispluginaredefinedasplainLessmixinshavingeither.function-prefixorbeingimmediatedescendantofa.functionnamespace.Forexamplethefollowingtwosnippetscreatethesamefunctionnamedbar. Usingnamespace: .function {    .bar() {        return: red;    }} Usingprefix: .function-bar() {    return: red;} ThedefinedfunctioncanbeusedsamewayandanywhereaCSS/Lessfunctioncan: div {    background-color: bar();    // red     color: lighten(bar(), 13%); // #ff4242     // etc. } Don'tmissthatthedefinedfunctionnameisbar,withoutanyprefixoradot. Additionallynotethatthefunctiondefinitionsshoulduseonlylowercasenames(e.g..function-barnot.function-Bar).Lessfunctionnamesarecase-insensitivesoforbothbar()andBar()callstatementsthecompilerwilllookonlyforthelowercasebardefinition(formoredetailssee#1). Supportedfunctionality SincecustomfunctionsaredefinedasregularLessmixins,theyinheritmostofstandardmixinbehaviourandfunctionality.Inparticular: Overloading(aka"ArgumentsPatternMatching") DefaultParameters VariadicArguments Guards ReturnValue Functionreturnvalueisspecifiedviareturnproperty. .function-foo() {    return: "Hello, I'm the foo return value.";} NoticethatsincethereturnstatementisjustaregularCSSpropertyitdoesnot"returnimmediately",andanycodeafterreturnisstillineffect.SamewayalldefaultLessbehaviorofCSSpropertiesappliestothereturnpropertyaswell. E.g.itcanbeoverridden: .function-bar() {    return: 1;    return: 2;    // function returns 2 } merged: .function-baz() {    return+: 1;    return+: 2;    // function returns 1, 2 } etc. OverridingCSSandbuilt-inLessfunctions CustomfunctiondefinitionsoverrideCSSorbuilt-inLessfunctionsofthesame name(certainperformancecriticalfunctionsarenotoverridablebydefaultthough,see-aoptionbelowformoredetails).Thatis,youcan"replace"/"extend"anyLessorevenCSSfunctionbyyourownimplementation. Forexample: // override `calc` globally: .function-calc(@expr) {    return: tired, won΄t calculate;} div {    width: calc(50% - 20px);    color: hsl(0, 50%, 25%);} span {    color: hsl(0, 50%, 25%);     // override `hsl` locally:     .function-hsl(@h, @s, @l) {        return: hsla(@h, @l, @s, 1); // happy debugging!     }} CSSresult: div {    width: tired, won΄t calculate;    color: #602020;}span {    color: #9f6060;} Moreexamples Seeincludedtestsformoreadvancedexamples. Options --always-override/alwaysOverride AlwaysoverridenativeCSSorLessfunctions Shorthand:-a.Forperformancereasons(mixinlookupisacostlyprocess)certainCSSandbuilt-inLessfunctionsaremarkedasnotoverridablebythecustomfunctions.Settingthisoptionallowsyoutooverrideany.Notehowever,thiscansignificantlyincreasecompilationtimeevenifyoudon'toverrideanything(foratypicalLessframework/codebasethisoptionmayresultinabout20%performancehit). Thelistoffunctionsnotoverridablew/o-acanbefoundhere. --globals-only/globalsOnly Useonlyglobalscopedefinitions Shorthand:-g.Bydefaultthepluginsearchesforapossiblefunctiondefinition(s)startingfromthecurrentscopeupwards(i.e.standardLessscoping).IfyourLesscodeisheavyonusingtoodeepnestingand/ortoomanylocalmixins,suchscope-awarelookupmaynegativelyaffectcompilationtime.Thisoptionallowsyoutorestrictthesearchtoafunctionsexplicitlydefinedintheglobalscope. ForanaverageLesssourcecodetheperformancedifferenceisinsignificant(unless-aoptionisalsoset),sonormallyyoudon'tneedthisoption(consideritas"experimental")unlessyou'rehuntingforeverysinglebitofcompilationtimeimprovement. ImplementationandCompatibility TodeliveritsfunctionalitythispluginhastousecertainhackishtricksandmethodsastandardLesspluginisnotsupposedtouse(simplybecauseastandardLesspluginisnotsupposedtoprovidesuchfunctionalityatall).Thismakestheplugintobequitevulnerabletopossiblecompilerinternalschanges,thusit'smoretiedtoaparticularLessversionthanatypicalpluginwouldbe. CurrentlysupportedLessversionsare2.4.0orhigher. Future Becauseoftheimplementationdetailsandsightlyconfusingfunctiondefinitionsyntax,thisfunctionality/featureideallyshouldbemovedintotheLesscore(notnecessarilyusingthesamesyntax). Seecorrespondingfeaturerequestandrelateddiscussionat#538.Please,donothesitatetoputyour+1thereifyoufindthisfunctionalityvaluable. Keywordslessless.jslesscsslesspluginlessfunctionsInstallnpmiless-plugin-functionsRepositoryGitgithub.com/seven-phases-max/less-plugin-functionsHomepagegithub.com/seven-phases-max/less-plugin-functionsDownloadsWeeklyDownloads520Version1.0.0LicenseMITLastpublish5yearsagoCollaboratorsTryonRunKitReportmalware