15

Is it possible to set a LESS variable to a given value, if it hasn't been defined?

I can only seem to find solutions for SASS.

Community
  • 1
  • 1
Till
  • 1,107
  • 12
  • 28

1 Answers1

8

An important remark: it turns out that the need for such trick very often happens to be an XY-Problem (as result of misunderstanding Less variable semantics). Normally there's no real use-cases where you actually want this (in Less you instead always define a default value (so it simply always exists) to be overridden at will). So before using the trick below, make sure it's not something else you want actually.

It is quite simple (since v1.4.0) if you need to provide such variable for the same scope (i.e. global or local) where it could already be defined:

@bar: 41; // comment/uncomment to test

.define-bar-if-not-defined() {@bar: 42}
.define-bar-if-not-defined(); // exposes a variable only if it's not already in this scope

#using-global-bar {
    global-bar: @bar;
}

#using-local-bar {
    @bar: 43; // comment/uncomment to test
    .define-bar-if-not-defined();

    local-bar: @bar;
}

However this method won't work if you try to use it for global/parent scope variables used in local scope (and that may be a problem if you need a generic method when you're not sure what scope the original variable could possibly come from): 

#using-unknown-bar-in-local-scope {
    // ... some code ...

    .define-bar-if-not-defined(); // won't override local @bar (if any) but always overrides global and parent scope @bar

    bar: @bar;
}

In that case I don't know any straight-forward solution (w/o some inline javascript hacks one could use in guard expression for example)

seven-phases-max
  • 11,765
  • 1
  • 45
  • 57
  • 1
    For whatever reason this method does not work when using the variable inside an @import string. The less compiler errors out saying the variable is undefined, even though you can use it in style definitions. – cameronhimself Dec 21 '15 at 17:29
  • @cameronhimself This is expected because imports are evaluated before mixins. Either way, so far I'v seen no use-case where such functionality would be necessary at all (I just answered the question as a hypothetic one). Every request for such facility usually turns to be a result of misunderstanding of how Less variables work in general (thus it's an "XY Problem", for more details see [#1400](https://github.com/less/less.js/issues/1400), [#1706](https://github.com/less/less.js/issues/1706) and so on). – seven-phases-max Dec 22 '15 at 03:55
  • @cameronhimself In other words if you have a specific use-case where you think you need this kind of trick - post it - I'm pretty sure it can be solved w/o such hacks in much easier way. – seven-phases-max Dec 22 '15 at 03:57
  • Cool! Works as expected. Use-case: As we've made a product feature XYZ deprecated we have move all their css markup and the configuration variables into `backward compatibility` sheet so. The sheet exist but it's unused and the compiler doesn't complain on undefined variables. But when the product is updated in some older customers who still might partially use the feature XYZ and do contain such variables, then those in the customer project should be used, rather than the ones in `backward compatibility` sheet. In short, the hack allows the deprecated feature to co-exist in the project. – Hrvoje Golcic Mar 08 '22 at 08:02