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