Less 如何使用较小的变量自身的值重置该变量

我想从一个无颜色变量创建一个

rgba

，并将结果分配给同一个变量，但我不能通过下面的代码实现这一点

@navbar-default-bg: rgba(red(@navbar-default-bg), green(@navbar-default-bg), blue(@navbar-default-bg), 0.9);

---

上述代码将导致编译时引发以下错误：

名称错误：@navbar default bg的递归变量定义

递归变量定义在Less中不起作用，因为Less使用变量的方式。这意味着该变量的最后一个定义（在同一范围内）将是所使用的定义。在您的示例中，这将导致错误，因为变量无法引用自身（以获取其最初声明的值）

引用较少的网站：

定义变量两次时，将使用变量的最后一次定义，从当前范围向上搜索。这类似于css本身，定义中的最后一个属性用于确定值

---

从给定的

rgb

颜色创建

rgba

颜色值的最佳方法是使用内置的

fade

功能（如下所示）。但请注意，不能将该值赋回同一变量

@navbar-default-bg: rgb(255, 0, 0);

#sample{
    color: fade(@navbar-default-bg, 90%);
}

上述较少的代码在编译时将产生以下CSS输出：

#sample {
    color: rgba(255, 0, 0, 0.9);
}

---

当然，你可以做一些类似于中提到的事情来实现重置效果，但我个人的观点是，对于可能以不同方式实现的事情来说，这太复杂了，太费劲了

该答案中提到的方法的示例实现是否适合此问题。（下面添加了代码，以防链接处于非活动状态。）

.init() {
    .inc-impl(rgb(255, 0, 0), 0.1); // set initial value
}
.init();
 .inc-impl(@new, @i) {
    .redefine() {
        @color: @new;
        @alpha: @i;
    }
}
.someSelector(@name) {
    .redefine(); // this sets the value of counter for this call only
    .inc-impl(rgba(red(@color), green(@color), blue(@color), @alpha), (@alpha + 0.1)); // this sets the value of counter for the next call 
    @className: ~"@{name}";
    .@{className}
    {
        color: @color;
    }
}
.someSelector("nameOfClass");
.someSelector("nameOfClass1");
.someSelector("nameOfClass2");