将媒体查询放入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

使用手写笔,如果您愿意,还可以定义几个块混合.我用这个:

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

你可以这样使用:

button
  +narrowerthan(mobile)
    flex-direction column