如何在 Ionic 5 和 Sass 中正确使用 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

这样试试

$a: 4em;
$b: 4em;

div {
  height: $a + $b;
  background: red;
}

Answer 2

在 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>