CODEWITHSUNDEEP
cssless
Huangism
Huangism

Reputation: 16438

How to escape built in function in Less?

I have the following

.linear-gradient(~"to left, #83111b 0, #83111b 50%, lighten(#83111b, 5%) 50%, lighten(#83111b, 5%) 100%");

linear-gradient is as follows

.linear-gradient(@params) {
    background-image: linear-gradient(@params);
    background-image: -webkit-linear-gradient(@params);
    background-image: -moz-linear-gradient(@params);
}

Is it possible to escape the lighten(#83111b, 5%) ? I understand I can use a variable to store it but I like to avoid that part.

Upvotes: 2

Views: 334

Answers (2)

Harry
Harry

Reputation: 89750

No, you cannot call a built-in function within an escaped string because then it gets treated as a single string and so the function wouldn't get called/evaluated.

Surprisingly, it seems like a temporary variable is not required and something like the below works for this particular case. Less compiler seems to be concatenating and treating the entire thing as a single parameter. 

.linear-gradient(@params) {
  background-image: linear-gradient(@params);
  background-image: -webkit-linear-gradient(@params);
  background-image: -moz-linear-gradient(@params);
}
a{
  .linear-gradient(~"to left, #83111b 0, #83111b 50%," lighten(#83111b, 5%) ~"50%," lighten(#83111b, 5%) ~"100%");
}

This model seems to be working fine for a lot of similar cases and so I think it would not be invalidated. In fact, since they are space separated (and not comma separated),the extra semi-colon at the end is also not required. (A semi-colon is required only when comma separated values should be considered as a single parameter. This is because either semicolon or comma can be used as a mixin parameter separator but when semicolon is present the comma is no longer considered as the separator.)

But I would still recommend doing something like the below because it looks more readable and clear.

.linear-gradient(@params) {
  background-image: linear-gradient(@params);
  background-image: -webkit-linear-gradient(@params);
  background-image: -moz-linear-gradient(@params);
}

a{
  @color1: lighten(#83111b, 5%);
  .linear-gradient(~"to left, #83111b 0, #83111b 50%, @{color1} 50%, @{color1} 100%");
}

The option suggested by Qwertiy is also a very good one but be careful with the @arguments option because when there are multiple other parameters for the same mixin, it would concatenate all into one single space separated value.

Upvotes: 1

Qwertiy
Qwertiy

Reputation: 21380

Is it possible to escape the lighten(#83111b, 5%)?

No. If you want to pass the string with commas, use @arguments and add a semicolon before closing bracket on the caller side.

.linear-gradient(~"to left, #83111b 0, #83111b 50%, lighten(#83111b, 5%) 50%, lighten(#83111b, 5%) 100%");

.linear-gradient(@params) {
    background-image: linear-gradient(@params);
    background-image: -webkit-linear-gradient(@params);
    background-image: -moz-linear-gradient(@params);
}

Wrong. While linear-gradient has to left the other two should have right instead of it.

Also it's good to place prefixed variants before the standard one.

Upvotes: 1

Related Questions