以字体缩写方式将单位添加到font-size和line-height变量

Question

我尝试学习SASS。为了编译我的文件，我使用Prepros应用程序。它一直很好，直到我开始使用mixins。我的代码如下：

@mixin fontface($size) {
    font: ($size)px/($size*1.7)px "Roboto Slab", Georgia, sans-serif;
}

我这样使用它：

@include fontface(28);

当我编译它时，我将空格添加到变量中，如下所示：

font: 28 px/47.6 px "Roboto Slab", Georgia, sans-serif;

我该如何更改？是因为应用程序，还是我做错了什么？

Answer 1

添加单位的正确方法是通过乘法。但是，您需要将其中一个值转换为字符串，以防止以速记分割：

@mixin fontface($size) {
    font: #{$size * 1px}/#{$size * 1.7px} "Roboto Slab", Georgia, sans-serif;
}

相反，您可能只想在将其传递给mixin之前应用该单元：

@mixin fontface($size) {
    font: #{$size}/#{$size * 1.7} "Roboto Slab", Georgia, sans-serif;
}

.foo {
  @include fontface(10px);
}

或使用无单位行高：

@mixin fontface($size) {
    font: #{$size}/1.7 "Roboto Slab", Georgia, sans-serif;
}

.foo {
  @include fontface(10px);
}