@include 中的 SASS 部门未编译

Question

我想将网格高度除以 2。但是，它没有编译为预期值。相反，它是这样编译的。

这是我的 scss 代码。我尝试了不同的组合。他们都没有工作。请指出错误在哪里。

@mixin phone-size($width, $height) {
  @media screen and (min-height: $height) and (min-width: $width) {
    @content;
  }
}

@include phone-size(360, 480) {

  $img-height: 90px;
  $grid-height: #{$img-height * 3 + 6px};

  .text-wrapper {
    $two: 2px;

    bottom: $grid-height / 2;
    bottom: #{$grid-height / 2};
    bottom: $grid-height / 2px;
    bottom: #{$grid-height / (2)};
    bottom: $grid-height / $two;
    bottom: $grid-height / (2);
    bottom: ($grid-height / $two);
  }
}

编译后的css代码。

@media screen and (min-height: 480) and (min-width: 360) {
  .text-wrapper {
    bottom: 276px/2;
    bottom: 276px/2;
    bottom: 276px/2px;
    bottom: 276px/2;
    bottom: 276px/2px;
    bottom: 276px/2;
    bottom: 276px/2px;
  }
}

我正在使用http://www.sassmeister.com/ 进行测试。 提前致谢！

Answer 1

{} 不是必需的

http://sass-lang.com/documentation/file.SASS_REFERENCE.html#interpolation_

$grid-height: ($img-height * 3) + 6px;

底部：$grid-height / 2; //>> 底部：138px;