开发者

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 function rgba

@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);
}
0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜