如何在带有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
}

有人能解释一下为什么这个不起作用吗？

根据一些建议使用$声明变量的答案，我更热衷于了解-- variables是如何工作的。为什么有两种定义变量的方法。

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

Answer 2

试着这样做

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

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