sass - 在字体速记中将单位添加到字体大小和行高变量

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;

我怎样才能改变它？是因为应用程序，还是我做错了什么？

score 6 · Accepted Answer

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

@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);
}

1 回答 1