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

取自question I answered previously .这是我使用的技巧:

在 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() 稍微优雅一些​​