较少-将mixin分配给变量并重复使用 [英] LESS - Assign mixin to variable and reuse

问题描述

给出以下LESS组合:

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;
}

那没问题.但是，我试图将#gradient > .vertical(@black, @white);分配给变量gradient1并重新使用它.所以理想情况是这样的:

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?

推荐答案

您不能在LESS中将混合结果分配给变量.您可以使用模式匹配以几乎相同的代码量获得基本相同的结果:

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; }

从本质上讲，.myGradient(gradient1)成为您的变量"名称，无论您放置在什么地方，它都会生成相同的代码.然后，您可以通过设置与模式匹配的变量来控制渐变，因此可以像这样设置其他渐变:

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); 
}

然后将各种背景变量设置为gradient1，gradient2，gradient3值，所有这些变量均使用将与模式匹配的.myGradient mixin.

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

这篇关于较少-将mixin分配给变量并重复使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！