使用SCSS的字体大小REM计算-数字后的空格

Question

我有一个文档，以磅为单位描述字体大小，出于我的目的，我发现在我的用例中2.8pt可以转换为1rem。

自然地，我做了一个scss函数来为我做翻译：

@mixin ptFontSize($pt) {
  font-size: ($pt/2.8)rem;
}

这样，当文档中显示p.big should be 14pt时，我可以将其放在CSS中：

p.big {
    @include ptFontSize(14);
}

但是scss在数字和rem之间输出一个空格：

font-size: 5 rem;

Chrome浏览器不喜欢那里的空间。使此mixin函数正确输出到CSS的正确方法是什么？

Answer 1

如果您想使用外部库，则可以使用sass-rem

  

https://www.npmjs.com/package/sass-rem

用法 SCSS

.demo {
  font-size: rem(24px); // Simple 
  padding: rem(5px 10px); // Multiple values 
  border-bottom: rem(1px solid black); // Multiple mixed values 
  box-shadow: rem(0 0 2px #ccc, inset 0 0 5px #eee); // Comma-separated values 
  text-shadow: rem(1px 1px) #eee, rem(-1px) 0 #eee; // Alternate use 
}

CSS

.demo {
  font-size: 1.5rem;
  padding: 0.3125rem 0.625rem;
  border-bottom: 0.0625rem solid black;
  box-shadow: 0 0 0.125rem #ccc, inset 0 0 0.3125rem #eee;
  text-shadow: 0.0625rem 0.0625rem #eee, -0.0625rem 0 #eee;
}