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);
}

debug属性输出以下内容：

_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难倒

1 个答案: