stylus / nib

Stylus mixins, utilities, components, and gradient image generation
http://stylus.github.io/nib
MIT License
1.91k stars 249 forks source link

Incompatibility: media queries and hashes #243

Closed gscottolson closed 10 years ago

gscottolson commented 10 years ago

My hashes won’t resolve when used with media queries. For example, the following fails to resolve:

$foo = {}
$foo.test = 'screen and (min-width:450px) and (max-width:600px)'
@media $foo.test
  p
    width: 100%

The resulting CSS:

@media $foo.test {
  p {
    width: 100%;
  }
}

A variable/media query combo will resolve though:

$baz = 'screen and (min-width:450px) and (max-width:600px)'
@media $baz
  p
    width: 100%

The resulting CSS:

@media screen and (min-width:450px) and (max-width:600px) {
  p {
    width: 100%;
  }
}

Is there a way to author this so the hash resolves?

notslang commented 10 years ago

This looks like a Stylus issue, rather than a nib one, since it fails in exactly the same way when nib is not included. Also, the issue you described seems to be the same as this one: https://github.com/LearnBoost/stylus/issues/1241

gscottolson commented 10 years ago

Thanks for the comment. I realized this was misfiled a few hours after I opened it.