CODEWITHSUNDEEP
csslessmedia-queriesbackslash
morshed
morshed

Reputation: 315

How do I escape a backslash inside media-queries in LESS?

I'm having some issues escaping a backslash in LESS. Here's my code:

/* Internet Explorer 9-10 */
@media screen and (min-width: 0\0) {

}

Any suggestion would be greatly appreciated.

Many Thanks.

Upvotes: 3

Views: 465

Answers (2)

Bart Burg
Bart Burg

Reputation: 4924

@min-width: ~"screen and (min-width: 0\0)";

@media @min-width {
    .box {
        width: 100%;
    }
}

Which outputs to:

@media screen and (min-width: 0\0) {
  .box {
    width: 100%;
  }
}

EDIT

To escape a string use '~', like so:

@media screen and (min-width: ~"0\0") {
    .box {
        width: 100%;
     }
}

Upvotes: 2

James Donnelly
James Donnelly

Reputation: 128791

From LESS's documentation:

String Functions

e

CSS escaping, replaced with ~"value" syntax.

It expects string as a parameter and return its content as is, but without quotes. It can be used to output CSS value which is either not valid CSS syntax, or uses proprietary syntax which Less doesn't recognize.

This can be used as follows:

@media screen and (min-width: ~'0\0') { ... }

This can also be called as a function (using e(...), which isn't mentioned in the docs):

@media screen and (min-width: e('0\0')) { ... }

Upvotes: 2

Related Questions