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

Question

我有一个描述 pts 字体大小的文档，我发现在我的用例中 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;
}