被 SASS mixin 难倒[重复]答案

【问题标题】：Stumped by SASS mixin [duplicate]被 SASS mixin 难倒[重复]
【发布时间】：2016-07-15 20:57:45
【问题描述】：

我编写了一个 SASS mixin，并将其包含在另一个部分文件中。出于某种奇怪的原因，它没有在编译的 CSS 中包含代码块。我可以使用@debug 转储计算，它们是正确的。为什么它不写入我的 CSS 文件？正在编译与 mixin 在同一位置声明的其他规则，而不是 mixin。任何指针都会有很大帮助。代码如下：

@mixin px2rem($property, $px) {
  $property: $px;
  $property: ($px / $base-font-size) * 1rem;
  @debug inspect(($px / $base-font-size) * 1rem);
}

调试属性输出以下内容：

_mixins.scss:4 DEBUG: 1.06667rem

这是使用它的选择器：

input, select {

    @include px2rem(font-size, 15px);
    @debug (16px / $base-font-size) * 1rem;
    @debug (15px / 16px) * 1rem;

    height: 2.5rem;
    line-height: 2.5rem;
    padding: 1rem;
    width: 70%;
    margin-bottom: 1rem;
    border-radius: 1px;
    border: #bcbebf 1px solid;
}

编译的 CSS：

.subscription input,
.subscription select{
  height:2.5rem;
  line-height:2.5rem;
  padding:1rem;
  width:70%;
  margin-bottom:1rem;
  border-radius:1px;
  border:1px solid #bcbebf
}

调试语句的输出：

_subscription.scss:9 DEBUG: 1.06667rem
_subscription.scss:10 DEBUG: 0.9375rem

【问题讨论】：

标签： css sass mixins

【解决方案1】：

尝试插值：

@mixin px2rem($property, $px) {
  #{$property}: $px;
  #{$property}: ($px / $base-font-size) * 1rem;
  @debug inspect(($px / $base-font-size) * 1rem);
}

编辑：

因为您希望 Sass 将变量 property 视为 CSS 属性，所以您需要对其进行插值。

否则 Sass 将执行变量赋值。

【讨论】：