使用Compass / Sass在媒体查询中进行可变插值

Question

我想知道是否有办法在Compass / Sass中实现以下输出？

$padding: 3em

div {
    padding: $padding;
}

@media screen and (max-width: 780px) {
    $padding: 2em;
}

/* outputs:

div {
    padding: 3em;
}

@media screen and (max-width: 780px) {
    div {
        padding: 2em;
    }
}

*/​

有没有办法做到这一点？基本上让Sass在更改该变量时自动编译在媒体查询范围内具有变量值的所有属性。

Answer 1

最简单的方法是使用mixin并传递参数。

@mixin divpadding($padding: 3em)
  padding: $padding

div
  +divpadding

@media screen and (max-width: 780px)
  div
    +divpadding(2em)

Answer 2

这是我最终如何实现它的。使用mixins。

+padding($padding: 3em)
    div {
        padding: $padding;
    }

+padding

@media screen and (max-width: 780px)
    +padding(2em)

/* outputs:

div {
    padding: 3em;
}

@media screen and (max-width: 780px) {
    div {
        padding: 2em;
    }
}

*/​