有没有一种方法可以同时为两个CSS属性分配相同的值？

Question

使用 CSS、LESS 或 Sass，你能同时为两个 CSS 属性赋相同的值吗？

就像这样：

.c1, c2 {sameValue}

但是不是像这样：

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

- RooksStrife

---

可以将 sameValue 分配给一个变量，并在两个属性中使用该变量，但我认为无法按你所写的方式实现。 - Serlite

LESS: @c1: red @c2: @c1，在SASS中相同的写法为：$c1: red $c2: $c1。在Stylus中，你可以获取另一个属性的值：http://stylus-lang.com/docs/variables.html#property-lookup。在CSS中，你可以使用`currentColor`和自定义属性来实现类似的效果。 - user4994625

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 mixin，传递一个属性列表（有时在其他关于 CSS/等的 SO 问题中称为数组）（.properties 的 @properties 参数；在此示例中为 @props）和要分配给它们所有属性的值（.properties 的 @value 参数；在此示例中为 red）。
• 请注意，.properties 具有计数器参数 @i，默认值为 0。
• .properties 具有一个 LESS CSS guard，检查 @i 是否小于它所传递的属性数量（保存在 @properties 中）。是的！（@i 是 0，属性列表肯定至少为 1）好的，我们可以通过保护。
• 获取属性名称：对列表中的第一项使用 LESS 的 extract()（我们需要说 @i + 1，因为我们将 @i 计数器从 0 开始。我们也可以从 1 开始 @i，并用 when (@i < (length(@properties) + 1)) 进行保护，但这更难读）
• 最后：编写样式。插值变量（@property）作为字符串（@{property}），并给它最初在 .demo 中传递给 .properties 的值（@value）
• LESS 循环！ 再次运行 .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)
}

- henry

---

在编程中，我更喜欢使用...@i:1) when (@i <= length(@properties)) {@property: extract(@properties, @i);...这种写法。请注意，这是一段代码，不是自然语言的句子。 - henry

Answer 2

如果您的浏览器支持自定义属性（也称为CSS变量），您可以定义一个自定义属性以便重复使用：

如果您的浏览器支持自定义属性（又名CSS变量），您可以定义一个自定义属性以便重复使用：

.foo {
  --example: red;
  background-color: var(--example);
  color: var(--example);
}

否则，您需要依赖于像LESS这样的预处理器：

.foo {
  @example: red;
  background-color: @example;
  color: @example;
}

或者Sass：

.foo {
  $example: red;
  background-color: $example;
  color: $example;
}

就能够链式属性而言，我不知道有任何预处理器或规范允许使用这种语法。

- zzzzBov

Answer 3

使用 Stylus，您可以通过 迭代 和 插值 来实现此操作：

.modal
  position : absolute
  for bord in top bottom left right
    {bord}: 1em
  for larg in  width min-width height min-height
    {larg}: auto
  for maxl in  max-width max-height
    {maxl}: none

- blobmaster

Answer 4

我认为你不能按照你描述的方式实现，你需要使用一个变量。但是，你可以通过共享相同命名空间的属性来实现类似的效果。

.funky {
  font: {
   family: fantasy;
   size: 30em;
   weight: bold;
  }
}

http://sass-lang.com/documentation/file.SASS_REFERENCE.html#nested_properties

- Shannon Young

Answer 5

在 Stylus 中，可以进行 属性查找，这使您能够使用当前或最近的父级祖先中的属性并将其用于计算。

对于您的特定情况，您可以编写：

.demo
  color: red
  background-color: @color

这会生成以下CSS：

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

这是一个LESS也需要的功能，但目前没有开发计划。目前在LESS（和SASS）中，您必须使用已建议的解决方案之一，通过传递额外的变量来实现。

- Luca Detomi

---

但目前没有开发它的计划 - 实际上，它已经在一年多以前实现了（https://github.com/less/less.js/pull/2654）。只是缺乏足够的人力资源来完善v3版本的所有新功能。 - seven-phases-max

抱歉，我不知道这件事。希望新的v3版本能够尽快到来。 - Luca Detomi