node.js 当有两个 using 变量时，less 移除背景属性

Question

我对 less 有疑问：

@frames_color: #faeacd;
@menu_color_hex: #faeacd;
@menu_color_rgba: rgba(250, 234 ,205 , 255);

更少：

.topmenu {
    a {

        background-color: @menu_color_hex;
        background-color: @menu_color_rgba;
    }
}

结果 css：

#user_field .topmenu a {
  background-color: #faeacd;

}

和

.topmenu {
    a {

        background-color: green;
        background-color: @menu_color_hex;
        background-color: red;
        background-color: @menu_color_rgba;
        background-color: blue;
    }

}

结果：

#user_field .topmenu a {
  background-color: green;
  background-color: red;
  background-color: #faeacd; /* value of menu_color_hex is used instead of menu_color_rgba? */
  background-color: blue;
}

我对自动提款机一窍不通。为什么它会删除一种背景颜色属性？是错误还是预期的行为？

Answer 1

只是回答它被删除的确切原因：

如上面评论所述，rgba 的 alpha 值应在 0...1 范围内，因此 255 的值被限制为有效 1，从而导致非透明颜色。然后由于 @menu_color_hex 和 @menu_color_rgba 具有完全相同的颜色值（rgba(250, 234, 205, 1) 等于 #faeacd），Less 简单地删除 background-color 重复项。

-

提示：你不需要手动指定透明或后备颜色值，如果你已经有另一个，使用相应的较少的功能，例如：

@menu_color_safe: fade(@menu_color, 100%); // non-transparent one for old browsers
@menu_color: rgba(250, 234, 205, .5);

或相反：

@menu_color_safe: #faeacd; // non-transparent one for old browsers
@menu_color: fade(@menu_color_safe, 50%);

Answer 2

在 @menu_color_rgba: rgba(250, 234 ,205 , 255) 中，“255”不是有效的 alpha 值 (it only ranges from 0–1)。

如果您不需要 alpha 值，则使用 rgb 可以提供更多的浏览器支持（例如 rgba 是 not supported in IE8）。

node.js 当有两个 using 变量时，less 移除背景 属性

node.js less removes background property when there are two using variables

css

less

node.js

-

node.js 当有两个 using 变量时，less 移除背景属性