CODEWITHSUNDEEP
less
juleee
juleee

Reputation: 466

Directly use the result of a custom less function

as a Software Developer I'm used to reuse my code instead of stupid copy&paste work.

In my Less-File, i want to compute a complementary color multiple times and use it e.g. for text color.

so i defined my function like this:

.getComplement(@baseColor){
    @invertedColor: #fff - @baseColor;
    return: @invertedColor;
}

with this i tried to use the outcome of the function like this:

.classSelector {
    color: .getComplement(#000);
}

But when compiling it, the compiler always says "Syntax Error" on the line where i use the function and set the color:

color: .getComplement(#000);

so my question is, how can i directly use the output of a function in LESS like it can be done with e.g.

color: darken(red, 10%);

Upvotes: 0

Views: 182

Answers (2)

ScottS
ScottS

Reputation: 72261

What you are defining is a parametric mixin, which is not technically a function (though it has aspects that are function like). The functions are all inbuilt in LESS (you cannot really define your own function unless you modify the LESS source code). Therefore, you cannot use a mixin to set a property value only. You can only use it to either set the property itself to a value (as Jonathan's answer does), or set the variable you wish to use, like this:

.getComplement(@baseColor){
    @invertedColor: #fff - @baseColor;
}

.classSelector {
    .getComplement(#f00);
    color: @invertedColor;
}

Produces this css:

.classSelector {
  color: #00ffff;
}

This will allow some flexibility to use it in multiple places, like this:

.classSelector2 {
    .getComplement(#f00);
    background-color: @invertedColor;  
}

But will not work twice in the same selector, because of the lazy loading style of LESS variables. So this will use the second value for both:

.classSelector {
    .getComplement(#f00);
    color: @invertedColor;
    .getComplement(#00f); // This will be used for both
    background-color: @invertedColor;  
}

CSS Output

.classSelector {
  color: #00ffff; // Note this is the value of the 2nd call to .getComplement()
  background-color: #00ffff;
}

Two possible work arounds for that are:

(1) Nest a selector block (this has the downside of duplicate css output)

.classSelector {
    .getComplement(#f00);
    color: @invertedColor;

    & {
    .getComplement(#00f);
    background-color: @invertedColor;
    }
}

CSS output

.classSelector {
  color: #00ffff;
}
.classSelector {
  background-color: #ffff00;
}

(2) Add some extra variables to output in the mixin (downside is larger mixin and some variables may go unused at times)

.getComplement(@baseColor, @ext:'C') {
    .returnColor(C) {
       @invertedColor: #fff - @baseColor;
    }
    .returnColor(B) {
       @invertedBkgColor: #fff - @baseColor;
    }
    .returnColor(@ext);
}

.classSelector {
    .getComplement(#f00);
    color: @invertedColor;
    .getComplement(#00f, B);
    background-color: @invertedBkgColor;
}

Produces this combined and correct css:

.classSelector {
  color: #00ffff;
  background-color: #ffff00;
}

There may be a few other creative ways to make the mixin usable more than once within a selector block, but those are the two that came to mind first.

Upvotes: 2

Jonathan
Jonathan

Reputation: 1833

The correct syntax would be as the function becomes the css variable and value

.getComplement(@baseColor){
    color: #fff - @baseColor;
}

.classSelector {
    .getComplement(#000);
}

Upvotes: 0

Related Questions