将这些线夹CSS变量转换为工作SCSS变量？

Question

我想使用这些变量作为SCSS变量，而不是我的项目中的CSS变量。然而，我无法真正找到一种方法来正确地转换它们。有人知道我是怎么做到的吗？

下面是我想转换的变量：

--step--2: clamp(0.91rem, 0.89rem + 0.1vw, 0.96rem);
--step--1: clamp(1.09rem, 1.05rem + 0.21vw, 1.2rem);
--step-0: clamp(1.31rem, 1.24rem + 0.37vw, 1.5rem);
--step-1: clamp(1.58rem, 1.46rem + 0.59vw, 1.88rem);
--step-2: clamp(1.89rem, 1.71rem + 0.89vw, 2.34rem);
--step-3: clamp(2.27rem, 2.01rem + 1.29vw, 2.93rem);
--step-4: clamp(2.72rem, 2.36rem + 1.83vw, 3.66rem);
--step-5: clamp(3.27rem, 2.75rem + 2.56vw, 4.58rem);

Answer 1

如果要使用SCSS中的值，只需执行以下操作：

$step-0: clamp(1.31rem, calc(1.24rem + 0.37vw), 1.5rem);

您需要额外的calc，因为添加是运行时计算。rem和vw是浏览器中的动态单元，SASS不能将它们添加到编译器中。

不幸的是，这也意味着SASS无法计算值，所以如果您想在进一步的计算中使用它们，还需要使用calc进行运行时计算。

.foo {
  width: $step-0 + 1px; // Doesn't work
  width: calc(#{$step-0} + 1px); // Does work
}