为 sass 创建自定义单元答案

【问题标题】：Creating custom unit for sass为 sass 创建自定义单元
【发布时间】：2018-11-28 03:20:32
【问题描述】：

我想创建自定义 css 单元，我将能够在带有 node.js 的 sass 中使用它。有没有关于为此创建 sass 插件的指南？举个例子，我想创建单位“dpx”，它将作为双像素工作，所以“width: 20dpx”将被处理为“width: 40px”。

其他可以与节点一起使用的解决方案（不是 sass 插件）也是可以接受的。

【问题讨论】：

【解决方案1】：

我知道这是一个老问题，但既然我发现了它，其他人也会发现它。在这种情况下，一个好的解决方案是使 1rem 等于 2px。你可以这样做：

html {
  font-size: 2px;
}

现在每个 1rem 将等于 2px。如果您想确保这不会破坏您当前的页面，您可以随时添加

body {
  font-size: 8rem;
}

将全局字体大小设置为 16px（只是猜测，因为这是默认值）。

【讨论】：

【解决方案2】：

作为当前答案的简化版本，您还可以编写以下内容：

$d: 2px;

div { font-size: 20*$d; }

【讨论】：

【解决方案3】：

使用一个接受字体大小并返回双倍值的 SASS 函数。

@function dpx($size) {
  @return $size * 2;
}

div {
  font-size: dpx(20px);  // output: font-size: 40px;
}

【讨论】：