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?

This may or may not be helpful, but [Sass can do it](http://thesassway.com/intermediate/responsive-web-design-in-sass-using-media-queries-in-sass-32) easily. — bookcasey, Oct 25 '12 at 02:49
I know, and I'm sure LESS can do it too, but I just really prefer Stylus' syntax and this is the only hurdle I haven't been able to leap. :( — Cory, Oct 25 '12 at 03:53

score 32 · Answer 1 · edited Mar 05 '18 at 13:10

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

score 25 · Accepted Answer · answered Oct 25 '12 at 08:18

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.

score 6 · Answer 3 · edited Mar 05 '18 at 13:08

6

With version 0.43.0 of Stylus, media queries are supported either as you have it in your example or without a colon like this:

t = 1000px

@media screen and (max-width t)
    html
        background blue

via Github

edited Mar 05 '18 at 13:08

Kos

4,890
9
38
42

answered Jul 15 '14 at 19:03

Yanofsky

1,806
1
17
15

score 5 · Answer 4 · answered Jan 14 '15 at 13:25

This is what worked for me.

medium = 'screen and (min-width: 768px)'
large = 'screen and (min-width: 992px)'
xlarge = 'screen and (min-width: 1200px)'

.box
    background: #000
    @media medium
        background: #111
    @media large
        background: #222
    @media xlarge
        background: #333

score 4 · Answer 5 · edited Mar 05 '18 at 13:09

4

This is now supported out of the box, snippet from official page:

foo = 'width'
bar = 30em
@media (max-{foo}: bar)
body
    color #fff

edited Mar 05 '18 at 13:09

Kos

4,890
9
38
42

answered May 14 '15 at 10:01

vikeri

642
6
16

score 3 · Answer 6 · answered Jun 03 '13 at 17:34

I wrote a mixin, although it's not completely ideal either:

// media
media(args...)
  output = null
  for arg in args
    // check for tuple
    if arg[1]
      push(output,unquote('(%s: %s)' % (arg[0] arg[1])))
    else
      push(output,unquote(arg))

  unquote(s('%s',output))

It can be used like this:

$_media = media(screen,'and',(min-width $screen-tablet))
@media $_media
  .container
    max-width 728px

CSS Output:

@media  screen and (min-width: 768px) {
  .container {
    max-width: 728px;
  }
}

score 3 · Answer 7 · edited Mar 05 '18 at 13:09

Should work now:

t = 1000px

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

http://stylus-lang.com/docs/media.html

From the documentation:

Interpolations and variables

You can use both interpolations and variables inside media queries, so it is possible to do things like this:

foo = 'width'
bar = 30em
@media (max-{foo}: bar)
  body
    color #fff

This would yield

@media (max-width: 30em) {
  body {
    color: #fff;
  }
}

It is also possible to use expressions inside MQ:

.foo
  for i in 1..4
    @media (min-width: 2**(i+7)px)
      width: 100px*i

would yield to

@media (min-width: 256px) {
  .foo {
    width: 100px;
  }
}
@media (min-width: 512px) {
  .foo {
    width: 200px;
  }
}
@media (min-width: 1024px) {
  .foo {
    width: 300px;
  }
}
@media (min-width: 2048px) {
  .foo {
    width: 400px;


 }
}

It's not quite everything. For instance, I can't do this: ```small-min = '(min-width: ' + lower-bound(small-range) + ')' large-max = '(max-width: ' + upper-bound(large-range) + ')' @media screen {small-min} and {large-max}``` — Kevin Ghadyani, Jan 09 '16 at 02:45

score 1 · Answer 8 · answered May 06 '16 at 10:56

If I may provide a clean and readable way, I use hashes to my advantage like so:

// Custom media query sizes
--query = {
    small: "screen and (min-width: 554px)",
    medium: "screen and (min-width: 768px)",
    large: "screen and (min-width: 992px)",
    extra-large: "screen and (min-width: 1200px)",
}

And how I would call it for example:

.main-logo
    font-large(--font.uni-sans-heavy)
    position: relative
    top: 50px
    left: 35px

    .logo-first
        color: --color.white
        margin-right: 3px

    .logo-second
        color: --color.bright-red

    @media --query.large
        left: 70px

Super obvious, and easy to read. Keep it nice and simple.

score 0 · Answer 9 · answered Oct 30 '14 at 17:51

0

I like to create a media mixin which makes it unnecessary to create a named variable for the media query:

media(query)
  @media query
    {block}

Usage proceeds as follows:

+media("screen and (min-width:" + width + "), print")
  .class
    foo: bar

answered Oct 30 '14 at 17:51

J Cracknell

3,498
1
19
13

Jason Johnson · Answer 10 · 2017-12-11T19:07:49.060

I liked the answer from Tony Tai Nguyen. Here's another iteration:

sizes = {
  mobile: 0 768
  tablet: 769 1023
  desktop: 1024 1215
  widescreen: 1216 1407
  fullhd: 1408 99999999
}
query = {}

for name, pxs in sizes
  min = '(min-width:' + pxs[0] + 'px)'
  max = '(max-width:' + pxs[1] + 'px)'
  query[name] = min + ' and ' + max
  query[name + '-up'] = 'screen and ' + min
  query[name + '-down'] = 'screen and ' + max

// Usage: @media query.mobile or @media query.tablet-up etc...

Variables in Stylus CSS Media Queries

10 Answers10