LessCss rgba and @vars
I'm trying to make a function with LessCss but i get an error:
.transparent-border (@alpha:.15, @color:'0,0,0', @type: solid, @size:1px) {
@val: @size @type rgba(@color, @alpha);
border:开发者_开发知识库 @val;
}
The error
error evaluating functionrgba
@val: @size @type rgba(@color, @alpha)
;
How can I fix it?
Use this code instead:
.transparent-border (@alpha:.15, @r:0, @g:0, @b:0, @type: solid, @size:1px) {
@val: @size @type rgba(@r, @g, @b, @alpha);
border: @val;
}
It doesn't only work, but it also makes more sense. In your previous attempt, you would have to pass the color in a string:
#myElement{
/*Old, not-working implementation*/
.transparent-border (0.15, "0, 0, 0", solid, 1px);
/*New, neat and working method */
.transparent-border (0.15, 0, 0, 0, solid, 1px);
/*Since these are the default settings, it's equivalent to*/
.transparent-border
}
Parsed LESS:
#myElement {
border: 1px solid rgba(0,0,0, 0.15);
}
精彩评论