String interpolation for LESS Variables

Question

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

possible duplicate of [Fancy Media Queries with some LESS Magic](http://stackoverflow.com/questions/15837808/fancy-media-queries-with-some-less-magic) — seven-phases-max, Apr 13 '15 at 19:56

score 1 · Answer 1 · answered Apr 13 '15 at 19:54

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;
  }
}

String interpolation for LESS Variables

1 Answers1