CODEWITHSUNDEEP
less
Luca Detomi
Luca Detomi

Reputation: 5716

LESS: variable that refers to another one's value with concatenate name

The following (vey simplified) LESS code runs correctly, printing value of width property, previosly assigned to @screen-md variable.

@screen-md:700px;
@size:md;

@temp:"screen-@{size}";
@width:@@temp;

.foo
{
  width:@width;
}

Imagine that @size value could be a parameter passed to a mixin. In general, to obtain desired result, I need to pass through @temp variable, first assigning her a variable name based upon @size value, and then using Variable name to finally assign it to @width variable.

My question is: is it possible to avoid need of @temp variable, collapsing

@temp:"screen-@{size}";
@width:@@temp;

into something like @width:@@"screen-@{size}" ?

Upvotes: 1

Views: 39

Answers (1)

Harry
Harry

Reputation: 89750

Yes, it is possible to collapse it into one single line like shown below:

@screen-md:700px;
@size:md;
.mixin(@size){
    width: ~"@{screen-@{size}}"; /* can either be assigned to another variable or property */
}

.output{
    .mixin(md);
}

Explanation:

  • screen-@{size} - would evaluate to screen-md as the input parameter to the mixin is md.
  • @{screen-@{size} - would therefore mean @{screen-md}. This would be evaluated as 700px.
  • ~"" - escaping is used to avoid the quotes being in printed in the output.

Upvotes: 1

Related Questions