Sass mixin 不取值，取而代之的是变量名

Question

我有简单的 calc mixin：

@mixin calc($what, $how, $that) {
    width: -webkit-calc($how- $that);
    width: -moz-calc($how - $that);
    width: calc($how- $that);
    width: $how;
}

我正在使用：

@include calc("width", 100%, 6px);

但编译后我得到：

  width: -webkit-calc($how- $that);
  width: -moz-calc($how - $that);
  width: calc($how- $that);
  width: 100%;

我做错了什么？ 为什么只有最后一行可以？

提前致谢！

Answer 1

您需要使用Sass variable interpolator:

@mixin calc($what, $how, $that) {
  width: -webkit-calc(#{$how}- #{$that});
  width: -moz-calc(#{$how}- #{$that});
  width: calc(#{$how}- #{$that});
  width: $how;
}

.sel {
  @include calc("width", 100%, 6px);
}

产量

.sel {
  width: -webkit-calc(100%- 6px);
  width: -moz-calc(100%- 6px);
  width: calc(100%- 6px);
  width: 100%;
}