以字体缩写方式将单位添加到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);
}