有没有办法一次为2个css属性分配相同的值？

Question

使用CSS, LESS, or Sass可以一次为2个css属性分配相同的值吗？

就像:

.c1, c2 {sameValue}

但是像这样:

.c2 { background-color:, color: sameValue}

Answer 1

你不能用CSS做到这一点.

最简单的方法是使用变量.以下是你在LESS中的表现

@color: red;
.demo {
  background-color: @color;
  color: @color;
}

在Sass中也是如此

$color: red;
.demo {
  background-color: $color;
  color: $color;
}

但你也可以实现你想要的力量.这是你在LESS中可以做到的一种方式:

.properties(@properties, @value, @i: 0) when (@i < length(@properties)) {
  @property: extract(@properties, @i + 1);   // get the property
  @{property}: @value;                       // write the style
  .properties(@properties, @value, (@i + 1)) // loop
}

.demo {
  @props: background-color, color;
  .properties(@props, red)
}

将编译成您想要的

.demo {
  background-color: red;
  color: red;
}

它是如何工作的？

• .demo调用的.properties 参数LESS混入,传递一个列表属性的(有时在其他的CSS /等SO问题称为阵列)(.properties的@properties参数;在这个例子中,@props)并将该值分配给所有这些(共.properties的@value参数;在这个例子,red).
• 请注意,.properties其计数器参数@i的默认值为0.
• .properties有一个LESS CSS保护,检查是否@i小于它传递的属性数(保持@properties).它是!(@i是0,并且属性列表肯定至少是1)好的,所以我们被允许通过警卫.
• 获取属性的名称:使用LESS的extract()列表中的第一项(我们需要说@i + 1,因为我们开始了@i柜台0.我们也可以开始@i在1,并与守卫when (@i < (length(@properties) + 1))但是这难以阅读)
• 最后:写出风格. 内插变量持有物业的名称(@property)作为字符串(@{property}),并给它我们原先传递给值.properties在.demo(@value)
• 少循环!.properties再次运行,但推进计数器@i一:.properties(staysTheSame, staysTheSame, (@i + 1))
• .properties将运行,直到它循环遍历其@properties列表中的所有项目.在那之后,@i将是平等的length(@properties),所以我们不会通过when (@i < length(@properties))警卫.

请注意,@ props可以在.test上面或者可以.test访问它的任何地方定义,并且值也相同.你最终可能会

@props: background-color, color;
@val: red;
@val2: green;
.properties {...}
.demo {
  border-color: @val2;
  .properties(@props, @val)
}
.demo2 {
  .properties(@props, @val2)
}