使用 Compass/Sass 进行媒体查询内部的变量插值 [重复]答案

【问题标题】：Variable interpolation inside of media queries with Compass/Sass [duplicate]使用 Compass/Sass 进行媒体查询内部的变量插值 [重复]
【发布时间】：2012-03-13 03:14:53
【问题描述】：

我想知道是否有办法在 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 编译所有具有变量作为其值的属性，当该变量发生更改时，会在媒体查询范围内自动编译。

【问题讨论】：

标签： css compass-sass sass

【解决方案1】：

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

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

div
  +divpadding

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

【讨论】：

这是一个更灵活的解决方案

【解决方案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;
    }
}

*/

【讨论】：