如何在一个语句中分配变量？

Question

我正在为我的项目使用CSS Less，我将问题写入Less。

此^([a-zA-Z0-9]+,?\s*)+$ color与.btn相同，但如何简化使用Less？

可变

.header

CSS

@whiteColor: #fff;

我用以下方式写的。 有没有办法只在一个声明中写出来？

.btn{    
    border: none;    
    color: #ffffff;    
}
.header{
    color:#fff;
}

Answer 1

假设需要为其分配值的属性相同（color），您可以使用grouping selectors之间的单个语句来执行此操作。以下是一个示例代码段：

@whiteColor: #fff;
.btn{    
  border: none;    
}
.btn, 
.header{ /* selector grouping */
  color: @whiteColor;
}

请注意，如果color不会经常更改，甚至不需要更少。我认为是这种情况，因为变量名称与颜色的耦合程度有多紧密，在这种情况下，您可以使用纯CSS，如下面的代码段所示。

.btn {
  border: none;
}
.btn,
.header { /* selector grouping */
  color: #fff;
}

/* Just for demo */

body {
  background: black;
}

<div class='btn'>Some button</div>
<div class='header'>Some header</div>

如果属性不同（一个属性为color而另一个属性为background），则即使使用Less，也无法将其简化为单行。

您可以在下面的代码段中使用parametric mixin和property name interpolation，但只有使情况复杂化而不是简化它。

/* If color is same but property is different */

@whiteColor: #fff;
.apply-white-color(@property){
  &{
    @{property}: @whiteColor;
  }
}
.btn{    
  border: none;    
  .apply-white-color(color); /* the property to which white color should applied is passed as parameter */
}
.header{
  .apply-white-color(background);    
}

/* If property is same but color is different */
@whiteColor: #fff;
@redColor: #f00;
.apply-color(@value){
  &{
   color: @value;
  }
}
.btn{    
  border: none;    
  .apply-color(@whiteColor); /* the color which should applied is passed as parameter */
}
.header{
  .apply-color(@redColor);    
}