css - SASS 和 LESS 在变量指向上的不同行为

Question

给定这个片段，想象它可以是 LESS 或 SASS 改变 $ by @

$lol: 1px !default;
$lil: $lol;
$lol: 8px;

.gg{
  border-radius: $lil;
}

在 SASS 中它编译为

.gg {
  border-radius: 1px;
}

在 Less 中它编译为:

.gg {
  border-radius: 8px;
}

在我目前的情况下，我更喜欢 LESS 的实现方式，因为前两行在 Bootstrap 库中，第三行应该覆盖 lil 的值。

如何仅通过更改 $lol 变量来覆盖 SASS 中的 $lil 变量？

Answer 1

因为 sass 变量分配了 !default 参数，即使您稍后将其更改为 8px，它也不会在 sass 中分配给该参数。

来自 SASS 文档

You can assign to variables if they aren’t already assigned by adding the !default flag to the end of the value. This means that if the variable has already been assigned to, it won’t be re-assigned, but if it doesn’t have a value yet it will be given one.