CODEWITHSUNDEEP
media-queriesstylus
Luca
Luca

Reputation: 9745

@media hack not parsed correctly by Stylus

I'm using Stylus CSS preprocessor and I'm trying to output this specific media query, which is a hack for IE8: 

@media (min-width 481px), screen\0

however the above compiles to: @media (min-width 481px), screen 0 as the \ is used for escaping: http://learnboost.github.io/stylus/docs/escape.html - escaping the backslash didn't work either screen\\0

I've tried using the unquote() method in various ways without any luck, as it does not compile at all:

 > 846| @media (min-width 481px), unquote('screen\0')
   847|   .social
   848|     max-width 401px
   849|     margin 0 auto

expected "(", got "function unquote"

or

 > 846| unquote('@media (min-width 481px), screen\0')
   847|   .social
   848|     max-width 401px
   849|     margin 0 auto

expected ")", got "string '@media (min-width 481px), screen\0'"

How can I get Stylus to output that, correctly?

Upvotes: 1

Views: 137

Answers (1)

kizu
kizu

Reputation: 43244

For now you can store the hack in a variable and then use it in the media query like this:

$ie8mediahack = 'screen\0'

@media (min-width 481px), $ie8mediahack
  .social
    max-width 401px
    margin 0 auto

This would also make it self-commented and not look like an actual hack :)

Upvotes: 1

Related Questions