当有两个使用variables时，node.js减less了背景属性

我有一个问题less：

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

less用：

 .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; } 

我是无知的atm。 为什么它删除一个背景颜色属性？ 它是错误还是有意的行为？

Answer 1

在@menu_color_rgba: rgba(250, 234 ,205 , 255) ，“255”不是有效的阿尔法值（ 它仅在0-1范围内 ）。

如果你不需要alpha值，那么使用rgb会有更多的浏览器支持（例如IE8不支持 rgba）。

Answer 2

只是为了回答为什么它被删除：

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

–

提示：如果已经有另一个颜色值，则不需要手动指定透明或备用颜色值，请使用相应的Less函数，例如：

 @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%);