如何使用自己的值重置较小的变量 [英] How should I reset a less variable using its own value

问题描述

我想从一个颜色较少的变量中创建一个rgba，并将结果分配给相同的变量，但是下面的代码无法做到这一点.

I want to create a rgba from a color less variable and assign the result to the same variable, but I can't do this by the following code.

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

推荐答案

上面的代码将导致在编译时引发以下错误:

The above code would result in the following error being thrown on compilation:

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

NameError: Recursive variable definition for @navbar-default-bg

递归变量定义在Less中将不起作用，因为 <变量的strong>延迟加载 .这意味着该变量的最后定义(在相同范围内)将是所使用的.在您的示例中，这将导致错误，因为变量无法引用自身(以获取其原始声明的值).

Recursive variable definitions won't work in Less because of the way Less does lazy loading of the variables. This would mean that the last definition for that variable (within the same scope) will be the one that is used. In your example it would result in an error because the variable cannot reference itself (to get its originally declared value).

减少网站报价:

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

When defining a variable twice, the last definition of the variable is used, searching from the current scope upwards. This is similar to css itself where the last property inside a definition is used to determine the value.

---

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

---

The best way to create a rgba color value from a given rgb color is to use the built-in fade function (like shown below). But note that, the value cannot be assigned back to the same variable.

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

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

上面的Less代码在编译时将产生以下CSS输出:

The above Less code when compiled would produce the following CSS output:

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

---

当然，您可以执行> 此答案 来达到重置效果的目的，但是我个人认为，对于某些可能可以通过其他方式实现的事情来说，它过于复杂和费力.

---

Of-course, you could do something like mentioned in this answer to sort of achieve a reset effect but my personal opinion is that it is way too much complexity and effort for something that can probably be achieved in a different way.

此处 是该方法中的示例实现该答案适合此问题. (在链接未激活的情况下添加了代码.)

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

这篇关于如何使用自己的值重置较小的变量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！