Search code examples
lessmultiparameter

Use border-width like parameter in LESS

I'm still discovering the utility of this technology. Please I have a question if someone can answer me. I'm trying to create a function like:

.advancedBorder( @color, @size )
{
     border: @size solid @color;
}

div
{
    .advancedBorder( #FFF, 1px 0px 1px 0px);
}

So, I tried in many ways to make it possible but without any success.

The real reason is to create a function that can be added to any box and setting for it any border size and color I prefer with minimum lines of code. Can someone show me how can be done?

Thanks!

Solution

  • The syntax generated is not valid in CSS. You are passing in the following:

    @color = #FFF @size = 1px 0px 1px 0px

    which in your mixin will generate:

    border: 1px 0px 1px 0px solid #FFF;

    as CSS. This is not a valid shorthand for borders in CSS. You need something like:

    .advancedBorder( @color, @size ){
    border-width: @size;
    border-color: @color;
    border-style: solid;
}