CSS少混合字体

Question

我试图完成一个mixin计算字体大小在rem单位基于px后退如果浏览器不支持rem使用px。但是我有一个问题如果我解析比如16px它会变成value+pxpx

主要的问题是，如果我想在其他地方使用相同的变量，我不能，因为我必须在没有px或单位度量的情况下定义它。

如何使其传递包含单位度量的值并正确返回?

对于那些将阅读它非常快，并认为为什么不删除没有px的连接将无法工作。会变成pxrem

.remCalc(@sizeValue) {
  @remValue: (@sizeValue / @font-size-base);
  font-size: ~"@{sizeValue}px";
  font-size: ~"@{remValue}rem";
}

Answer 1

可以使用unit()函数

.remCalc(@sv) {
  @sizeValue: unit(@sv);
  @remValue: (@sizeValue / @font-size-base);
  font-size: unit(@sv,px);
  font-size: unit(@remValue,rem)";
}

例子:

@sv: 10px;

功能可以剥离单元

unit(@sv); // 10

或更改单位

unit(@sv,em); // 10em