Css 为sass创建自定义单元

Css 为sass创建自定义单元,css,node.js,webpack,sass,Css,Node.js,Webpack,Sass,我想创建自定义css单元,我将能够在带有node.js的sass中使用它。有没有关于为此创建sass插件的指南?举个例子,我想创建一个单元“dpx”,它将作为双像素工作,所以“宽度:20dpx”将被处理为“宽度:40px” 也可以接受其他可与node一起使用的解决方案(非sass插件)。使用接受字体大小并返回加倍值的sass函数 @function dpx($size) { @return $size * 2; } div { font-size: dpx(20px); // out

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


也可以接受其他可与node一起使用的解决方案(非sass插件)。

使用接受字体大小并返回加倍值的sass函数

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

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

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

$d: 2px;

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

我知道这是个老问题,但既然我发现了,其他人也会发现。 在你这样的情况下,一个好的解决办法是使1rem等于2px。 您可以这样做:

html {
  font-size: 2px;
}
现在每个1rem等于2px。如果你想确保这不会破坏你的当前页面,你可以随时添加

body {
  font-size: 8rem;
}

将全局字体大小设置为16px(这是一个默认值,仅作猜测)。

谢谢,但我需要的是精确的自定义单位,而不是sass函数。这是因为真正的任务比示例更复杂。我还需要使用选择器中其他字段的值来计算当前值。我不需要一直通过所有考试