css - 有没有办法一次为 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 parametric LESS mixin ，传递属性( .properties 的 @properties 参数；在本例中为 @props )的列表(有时在关于 CSS/etc 的其他 SO 问题中称为数组)和要分配给所有这些的值( .properties的 @value 参数；在本例中为 red )。

注意 .properties 有一个计数器参数 @i ，默认值为 0 。

.properties 有一个 LESS CSS guard，用于检查 @i 是否小于它传递的属性数量(保存在 @properties 中)。这是! ( @i 是 0 ，并且属性列表肯定至少是 1 )好的，所以我们被允许通过守卫。

获取属性的名称:在列表中的第一项上使用 LESS's extract() (我们需要说 @i + 1 因为我们在 @i 处启动了 0 计数器。我们也可以在 @i 处启动 1 ，并且用 when (@i < (length(@properties) + 1)) 来保护它，但它更难阅读)

最后:写风格。 interpolate the variable 将属性名称( @property )保存为字符串( @{property} )，并将我们最初在 .properties 中传递给 .demo 的值( @value )

LESS loop! 再次运行 .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)
}