Allow mixins to create CSS outside of the selector

[linus]

Perhaps not the clearest title, but here is what I would like to be able to do:

Turn this:

container()
  width 960px
  @media only screen and (max-width: 959px)
    width 768px

#content
  container()

Into this:

#content {
  width: 960px;
}

@media only screen and (max-width: 959px) {
  #content {
    width: 768px;
  }
}

Note: I'm not sure about the actual syntax for the mixin, there is probably a superior way!

[ghost]

wouldn't:

container()
  width 960px
  @media only screen and (max-width: 959px) &
    width 768px

work? Note the trailing &

[linus]

cwolves: Seems good to me!

[tj]

it would be something like this i guess:

container()
  width: 960px
  @media only screen and (max-width: 959px)
    &
      width: 768px

#content .foo .bar
  container()

which almost works but it outputs some extra junk right now

[tj]

actually, i guess we would need some specific logic to pull @media etc out, to become root-level

[linus]

visionmedia: Yes, I thought a bit about whether there should be a generic way of doing it or special-casing @media somehow. I think @media is unique in that you would like to do something like this with it, so IMHO @media-specific logic doesn't seem wrong to me. In fact, since @media doesn't make any sense to have inside the selector, my first suggestion might be acceptable also (if stylus sees a @media section in a mixin, pull that out to root-level and apply the rules to the selector there).

I wouldn't be mad of stylus also kept track of all identical @media queries and output the matching rules all below that, while keeping order:

mixin1()
  width: 200px
  @media print
    width: 300px

mixin2()
  width: 400px
  @media print
    width: 500px

.foo
  mixin1()

.bar
  mixin2()

Generates:

.foo {
  width: 200px;
}

.bar {
  width: 400px;
}

@media print {
  .foo {
    width: 300px;
  }

  .bar {
    width: 500px;
  }
}

But that might not feel "stylus-like", I'm not sure. It would be cleaner CSS, though.

[tj]

I think SASS does similar, im not 100% sure on that but I think i've seen it, might be worth checking out what they do but what you're suggesting there is similar to the @extend feature (that I also want), so in general im for it

[kmiyashiro]

SASS introduced @media sugar in 3.1. You don't need to put it in a mixin, it will read whatever selector it is currently inside and pull it out.

.foo {
    margin: 10px;

    @media screen and (min-width:480px) {
        margin: 0;
    }
}

Output

.foo { margin: 10px; }

@media screen and (min-width: 480px) {
    .foo { margin: 0; }
}

http://sass-lang.com/docs/yardoc/file.SASS_CHANGELOG.html#_bubbling

[tj]

ah yes the "bubbling" thing, that's it

[mjadobson]

Was wishing for this the other day. Would love to see this added.

[linus]

While reading Google's recent article on internationalization, I thought of another use case. Imagine if we could do:

article img
  float: left
  margin: 0.5em
  body.rtl
    &
      float: right

And it would compile to:

article img {
  float: left;
  margin: 0.5em;
}

body.rtl article img {
  float: right;
}

That would be very neat, IMO.

[tj]

@linus

article img
  float: left
  margin: .5em
  body.rtl &
    float: right

[linus]

@visionmedia Wow, I did not know that! Awesome!

[tj]

merged and added some more tests. If you come across weird use-cases please add some tests :) the more the better!

[tj]

also note that currently a selector is still necessary within the @media block, you can't just chuck props in there yet

[tj]

this is valid though for immediate props:

foo()
  @media only screen and (max-width: 900px)
    &
      foo: bar
      bar: baz

.something
  foo()

[tipiirai]

Thank you guys for this!

Still wanting to use variables on the media element such as

@media only screen and (max-width: my_max_width)

but happy with this one too.