css - 将媒体查询放入 mixin

Question

我有很多 css 文件，并且经常出现：

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

我正在使用手写笔。
有一天，我的老板让我将媒体查询更改为：

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

现在我需要搜索我的所有文件并替换为新的媒体查询。

是否有任何选项可以将此媒体查询放入 mixin 或其他东西中？

Answer 1

取自我之前回答的一个问题。这是我使用的黑客：

在variables.styl

smartphoneWidth = 748px
tabletWidth     = 1012px

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

现在在您的其他手写笔文件中，您可以使用：

@media mqSmartphone
    // Styles go here

@media mqTablet
    // Styles go here

虽然仍然很丑，但我觉得它比使用 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

Answer 3

由于 Stylus 不支持媒体查询中的插值或变量（或 mixins 的块参数），因此您只能使用此 hack：

$my_query = "@media all and (max-width: 400px), (orientation: portrait) {"

unquote($my_query)
…
unquote("}")

那么当您需要更改查询时，您需要更改$mu_query变量。

除了丑陋的语法之外，唯一的缺点是这不适用于冒泡的媒体查询。