css - 如何使用 Sass 在 Ionic 5 中正确使用 Var() 和 cal()

Question

我在结合使用 var 和 calc 函数时遇到问题。 这是我的场景

--variable-1 : 10px;
--variable-2 : 20px;
--variable-3 : calc(var(--variable-1) + var(--variable-2));
.some-class {
  width: var(--variable-3); // does not work
}

有人可以解释为什么这不起作用吗？

在一些建议使用 $ 声明变量的答案之后，我更想了解变量如何工作。以及为什么有两种定义变量的方法。

$some-variable 和 --some-variable 有什么区别？

Answer 1

在 calc 函数中使用它时，您需要对变量进行插值。你可以这样做。

这是我修改过你的代码的例子，你可以看看。

$variable-1 : 12em;
$variable-2 : 4em;

.some-class {
  width: calc(#{$variable-1} + #{$variable-2});
  background-color: red;
  height: 100px;
}

<div class="some-class"></div>