CODEWITHSUNDEEP
csssyntax-errorless
vitto
vitto

Reputation: 19476

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?

Upvotes: 0

Views: 1362

Answers (1)

Rob W
Rob W

Reputation: 349142

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

Upvotes: 2

Related Questions