CODEWITHSUNDEEP
lessstring-interpolation
jtarr523
jtarr523

Reputation: 361

String interpolation for LESS Variables

I have a media query in LESS: @media (max-width: 1079px) { ... }. Basically I want to create a variable in LESS in which I can just say @media (*LESS variable goes here*) { ... } in my stylesheets. How can I interpolate the string max-width: 1079px into a LESS variable to make this happen?

Thanks

Upvotes: 1

Views: 410

Answers (1)

Josh Crozier
Josh Crozier

Reputation: 241178

For the variable, you could escape the string value: 

@media-max-width: ~"max-width: 1079px";

Code snippet:

@media-max-width: ~"max-width: 1079px";

@media (@media-max-width) {
  p {
    color: #f00;
  }
}

Which will output the following:

@media (max-width: 1079px) {
  p {
    color: #f00;
  }
}

You could also include the parenthesis in the variable too:

@media-max-width: ~"(max-width: 1079px)";

@media @media-max-width {
  p {
    color: #f00;
  }
}

Upvotes: 1

Related Questions