CODEWITHSUNDEEP
cssless
Run
Run

Reputation: 57286

LESS - Potentially unhandled rejection [2] No matching definition was found?

I am trying to get this in the result from LESS:

.article-text {
  -moz-box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.25);
  -webkit-box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.25);
  box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.25);
}

My attempt:

.box-shadow(@rgba: 0,0,0,0.25) {
    -moz-box-shadow:    inset 0 0 100px rgba(@rgba);
    -webkit-box-shadow: inset 0 0 100px rgba(@rgba);
    box-shadow:         inset 0 0 100px rgba(@rgba);
}

.shadow,
.article-text {
    .box-shadow();
}

Error:

Potentially unhandled rejection [2] No matching definition was found for .box-shadow() in file /var/.../style.less line no. 613

Any ideas?

Upvotes: 1

Views: 1359

Answers (1)

Harry
Harry

Reputation: 89780

Note: As seven-phases-max mentions in his comment, it is always better to leave the prefixing stuff to either prefix-free or AutoPrefixer libraries.

In Less, the parameters defined for a parametric mixin are separated by either comma or semi-colon and so when you define a mixin as .box-shadow(@rgba: 0,0,0,0.25), the compiler is confused. The value it encounters after the comma is not a variable but is a value. the compiler treats it as a mixin where there is one variable parameter (the @rgba) and three fixed value parameters (the 0,0,0.25).

The solution to your problem is to use them as separate parameters (r, g, b, a) instead of as a single parameter (rgba).

.article-text (@r: 0, @g: 0, @b: 0, @a: 0.25) {
  -moz-box-shadow:    inset 0 0 100px rgba(@r, @g, @b, @a);
  -webkit-box-shadow: inset 0 0 100px rgba(@r, @g, @b, @a);
  box-shadow:         inset 0 0 100px rgba(@r, @g, @b, @a);
}
#demo1{
  .article-text;
}
#demo2{
  .article-text(255,255,255,0.75);
}

Alternate ways to overcome this would have been to use a ; (dummy) at the end like - .article-text (@rgba: 0,0,0,0.25;) or write it as - .article-text (@rgba: ~"0,0,0,0.25") but both have limitations. The first one would make the @rgba variable have a list as its default value but the rgba function (used within the mixin) expects only numbers as inputs. So, we would have to write ugly extract functions to get the individual values from the list and use it (like below example) whereas the second one would convert it into a single string and make it unusable.

.article-text (@rgba : 0,0,0,0.25;) {
  @r: extract(@rgba, 1);
  @g: extract(@rgba, 2);
  @b: extract(@rgba, 3);
  @a: extract(@rgba, 4);
  -moz-box-shadow:    inset 0 0 100px rgba(@r, @g, @b, @a);
  -webkit-box-shadow: inset 0 0 100px rgba(@r, @g, @b, @a);
  box-shadow:         inset 0 0 100px rgba(@r, @g, @b, @a);
}
#demo1{
  .article-text;
}
#demo1{
  .article-text(255,255,255,0.75;);
}

Upvotes: 2

Related Questions