css - 被 SASS mixin 难住了

Question

我编写了一个 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

Answer 1

尝试插值:

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

编辑:

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

否则 Sass 将执行变量赋值。