putting media query in a mixin

Question

I have many css files and many occurrences of:

@media all and (max-width: 400px), (orientation: portrait) {
    ....//In each file different style that relevant to the component the file represnt
}

I am using stylus.
One day my boss asked me to change that media query to:

@media all and (max-width: 400px), (max-height: 400px) {
    ....
}

Now I need to search all my files and replace to the new media query.

Is there any option to put this media query in a mixin or something?

Answer 1

Taken from a question I answered previously. Here is the hack I use:

In variables.styl

smartphoneWidth = 748px
tabletWidth     = 1012px

mqSmartphone = "only screen and (max-width: " + smartphoneWidth + ")"
mqTablet     = "only screen and (max-width: " + tabletWidth     + ")"

Now in your other stylus files you can use:

@media mqSmartphone
    // Styles go here

@media mqTablet
    // Styles go here

While still ugly, I feel it is slightly more elegant than using unquote()

Answer 2

With stylus, you can also define a couple of block mixins if you prefer. I use this:

widerthan(var)
  condition = 'screen and (min-width: %s)' % var
  @media condition
    {block}

narrowerthan(var)
  condition = 'screen and (max-width: %s)' % var
  @media condition
    {block}

mobile = 748px

Which you can then use like this:

button
  +narrowerthan(mobile)
    flex-direction column