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

以下是我最终是如何做到这一点的。使用mixin。

+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;
    }
}
*/​