css - 是否有任何用于 sum 变量的 PostCSS 插件？

Question

我现在只是使用precss插件，但我想像这样计算 PostCSS 中的变量

$sidebar-width: 50px;
$container-padding-left: 20px;

#sidebar {
  position: absolute;
  top: 0;
  left: 0;
  width: $sidebar-width;
  z-index: 100;
}
#container {
  margin-left: -$sidebar-width;
  padding-left: $sidebar-width + $container-padding-left;
}

+postCSS 中有计算插件吗？

我也试过calc($sidebar-width + $container-padding-left);，但它不起作用。

我查找了https://github.com/postcss/postcss/blob/master/docs/plugins.md 但我找不到我想要的。

Answer 1

我找到了postcss-calc https://github.com/postcss/postcss-calc

这就是我想要的。完成后插入 calc 模块precss。

Answer 2

padding-left: $sidebar-width + $container-padding-left;

postcss-automath 做得更好，没有 calc()

Answer 3

好像您将变量插件放在 postcss-calc 之后。当顺序正确时，只需使用 PreCSS 插件包。