CODEWITHSUNDEEP
csslessextendmixins
Diego
Diego

Reputation: 7562

Using LESS, is it possible to extend parametric mixins?

I'm new to LESS and I'm just experimenting with it, using version 1.5. I discovered the useful extend command, but I was wondering if that could be applied to parametric mixins as well as static ones. Apparently, this doesn't seem possible, based on my experiments:

This works

.some-mixin {

}

.child {
  &:extend(.some-mixin);
}

This doesn't work and throws an "unexpected token" error:

.some-mixin(@color, @bgcolor) {
  color: @color;
  background-color: @bgcolor;
}

.child1 {
  &:extend(.some-mixin(red, blue));
  border: 1px solid blue;
}

.child2 {
  &:extend(.some-mixin(red, blue));
  border: 1px solid green;
}

.child3 {
  &:extend(.some-mixin(red, blue));
  border: 1px solid red;
}

Is this a current limitation of LESS, or am I using it incorrectly? Thanks in advance for the answers.

Edit - Added expected output, as per request

What I would expect makes more sense when there are more children extending the parametric mixin:

.child1,
.child2,
.child3 {
  color: red;
  background-color: blue;
}

.child1 {
  border: 1px solid blue;
}

.child2 {
  border: 1px solid green;
}

.child3 {
  border: 1px solid red;
}

Upvotes: 3

Views: 1370

Answers (2)

ScottS
ScottS

Reputation: 72261

I'm not sure what you are trying to achieve (that is, I am not sure what you expect the :extend() code to actually do if it were extending the parameteric mixin). If your desire is to define the colors of .child, then using it as a straight mixin works:

LESS

.some-mixin(@color, @bgcolor) {
  color: @color;
  background-color: @bgcolor;
}

.child {
 .some-mixin(red, blue);
}

CSS Output

.child {
  color: #ff0000;
  background-color: #0000ff;
}

This also makes .child itself a mixin for the red and blue color combination, which I think would have been a net result of the extension working if it had worked. That is, I would expect your second set of code to have produced something like this (theoretically; this does not actually work nor is it actually produced in LESS):

.some-mixin(@color, @bgcolor),
.child(@color: red, @bgcolor: blue) {
  color: @color;
  background-color: @bgcolor;
}

But these two are nearly equivalent as mixins (one has the added parameters):

/* theoretical mixin if extension worked */
.child(@color: red, @bgcolor: blue) {
  color: @color;
  background-color: @bgcolor;
}
/* code from straight use of .some-mixin in .child */
.child {
  color: #ff0000;
  background-color: #0000ff;
}

So that either of the above used like so will get the result of mixing in the child values to the new selector:

LESS

.test {
  .child; /* or using .child(); */
}

CSS Output

.test {
  color: #ff0000;
  background-color: #0000ff;
}

Upvotes: 3

seven-phases-max
seven-phases-max

Reputation: 11820

No, currently this is not supported. But it's planned to be implemented in future versions.

Upvotes: 2

Related Questions