@include中的SASS部门没有编译

时间:2016-06-07 13:27:45

标签: sass mixins

我想将网格高度除以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/进行测试。 提前谢谢!

1 个答案:

答案 0 :(得分:2)

{}不是必需的

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

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

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