被 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将执行变量赋值。

被 SASS mixin 难住了

Stumped by SASS mixin

css

sass

mixins