Variables in Stylus CSS Media Queries

Question

I've tried everything but I can't get the Stylus CSS preprocessor to use variables in media queries.

For instance this doesn't work:

t = 1000px  @media screen and (max-width: t)     html         background blue 

Anyone know how to do this?

Answer 1

It looks like stylus supports a little cleaner way to do the same thing as of this pull request.

Here, given a block size, I can make styles that center the container in the page, and set the container size to be 1, 2, or 3 blocks wide based on the browser size. Letting the media query be a variable (instead of sticking variables inside the media query line) makes it a bit cleaner than using the unquote method metioned above.

/* in app.styl */  full_block_width = 300px  three_blocks = "all and (min-width: " + 3*full_block_width + ")" two_blocks = "all and (min-width: " +  2*full_block_width + ") and (max-width: " + (3*full_block_width - 1) + ")" one_block = "all and (max-width: " + (2*full_block_width - 1) + ")"  .container    margin: auto  @media three_blocks   .container      width: (3*full_block_width)  @media two_blocks   .container      width: (2*full_block_width)  @media one_block   .container      width: full_block_width 

Answer 2

It's sad, but you can't use variables or interpolations on media queries. I stumbled upon similar task yesterday and came with this solution:

t = 1000px  unquote("@media screen and (max-width: " + t + ") {") html     background blue unquote("}") 

This is not pretty, but it works — you can use unquote to workaround most of the such Stylus problems actually.