LESS - Assign mixin to variable and reuse

Question

Given this LESS mixin:

#gradient {
  .vertical (@startColor: #555, @endColor: #333) {
      background-color: @endColor;
      background-repeat: repeat-x;
      background-image: -khtml-gradient(linear, left top, left bottom, from(@startColor), to(@endColor)); /* Konqueror */
      background-image: -moz-linear-gradient(@startColor, @endColor); /* FF 3.6+ */
      background-image: -ms-linear-gradient(@startColor, @endColor); /* IE10 */
      background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, @startColor), color-stop(100%, @endColor)); /* Safari 4+, Chrome 2+ */
      background-image: -webkit-linear-gradient(@startColor, @endColor); /* Safari 5.1+, Chrome 10+ */
      background-image: -o-linear-gradient(@startColor, @endColor); /* Opera 11.10 */
      filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@startColor,@endColor)); /* IE6 & IE7 */
      -ms-filter: %("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@startColor,@endColor); /* IE8+ */
      background-image: linear-gradient(@startColor, @endColor); /* the standard */
  }
}

It would normally be called as follows to style the header/footer:

header {
    #gradient > .vertical(@black, @white);
    width: 100%;
}

footer {
    #gradient > .vertical(@black, @white);
    padding: 20px;
}

That works no problem. However, I am trying to assign the #gradient > .vertical(@black, @white); to a variable gradient1 and re-use it. So something like this ideally:

@gradient1:      #gradient > .vertical(@black, @white);
@headerBackground:    @gradient1;
@footerBackground:    @gradient1;    
header { @headerBackground; width: 100%; }
footer { @footerBackground; padding: 20px; }

This does not work - but how can this be fixed to work?

Answer 1

You cannot assign a mixin result to a variable in LESS. You can use pattern matching to get essentially the same result with nearly the same amount of code:

.myGradient(gradient1) { 
  #gradient > .vertical(@black, @white); 
}
@headerBackground:    gradient1;
@footerBackground:    gradient1;    
header { .myGradient(@headerBackground); width: 100%; }
footer { .myGradient(@footerBackground); padding: 20px; }

Essentially, .myGradient(gradient1) becomes your "variable" name that generates the same code no matter where you put it. Then you can control your gradients through the variables that you set that will match the pattern, so you could set up other gradients like so:

.myGradient(gradient2) { 
  #gradient > .vertical(@red, @blue); 
}
.myGradient(gradient3) { 
  #gradient > .vertical(@yellow, @orange); 
}

And then set various background variables to the gradient1, gradient2, gradient3 values, all using the .myGradient mixin that will match to the pattern.

Answer 2

You can't assign a mixin to a variable, but you can create a new mixin as an alias:

.gradient1() {
    #gradient > .vertical(@black, @white);
}
.headerBackground() {
    .gradient1();
}
.footerBackground() {
    .gradient1();
}    
header {
    .headerBackground();
}
footer {
    .footerBackground();
}