Question

我想从颜色较少的变量创建rgba并将结果分配给同一个变量，但我不能通过以下代码执行此操作。

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

Answer 1

上面的代码会导致编译时抛出以下错误：

NameError： @ navbar-default-bg的递归变量定义

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

引用较少的网站

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

从给定的rgba颜色创建rgb颜色值的最佳方法是使用内置的fade函数（如下所示）。但请注意，该值不能分配回同一个变量。

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

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

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

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

当然，你可以做一些像this answer中提到的那样来实现重置效果，但我个人认为，对于可能在不同的事情中实现的东西来说，这太过复杂和努力了。方式。

Here是该答案中提到的方法的示例实现，适用于此问题。（代码在下面添加，只是在链接变为非活动状态。）

.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");

我应该如何使用自己的值重置less变量

1 个答案: