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

Question

使用

CSS, LESS, or Sass

可以同时为 2 个 css 属性分配相同的值吗？

就像：

.c1, c2 {sameValue}

但是像这样：

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

Answer 1

LESS v3.0.0 更新

在 LESS v3+ 中，您可以查找属性：

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

请参阅文档了解详细信息。

---

原答案

CSS

你不能用 CSS 做到这一点。

少，粗俗

最简单的方法是使用变量。以下是您如何在 LESS 中做到这一点

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

Sass 中也有同样的事情

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

但你也可以获得你想要的力量。这是一种可以用更少的方式做到这一点的方法：

.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，传递属性（.properties的

  @properties

  参数；在本例中）的

  list

  （有时在有关 CSS/等的其他 SO 问题中称为数组） 、

  @props

  ）以及分配给所有这些参数的值（

  .properties

  的

  @value

  参数；在本例中为

  red

  ）。
• 请注意，

  .properties

  有一个计数器参数

  @i

  ，默认值为

  0

  。

• .properties

  有一个 LESS CSS 防护，用于检查

  @i

  是否小于它传递的属性数量（保存在

  @properties

  中）。这是！ （

  @i

  是

  0

  ，属性列表肯定至少是

  1

  ）好的，所以我们可以通过警卫了。
• 获取属性的名称：在列表中的第一项上使用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)
}

Answer 2

如果您的

浏览器支持自定义属性（又名 CSS 变量），您可以定义自定义属性以供重用：

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

否则，您将需要依赖预处理器，例如 LESS：

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

或萨斯：

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

就能够链接属性而言，我不知道任何允许该语法的预处理器或规范。

Answer 3

我认为您不能按照您所描述的方式进行操作，您需要使用变量。但是，您可以使用共享相同命名空间的属性来实现类似的效果。

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

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

Answer 4

在

Stylus中可以进行属性查找，它允许您使用当前或最近的父祖先中的属性并将其用于计算。

对于您的具体情况，您可以写：

.demo
  color: red
  background-color: @color

产生这个CSS：

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

这是一个

要求 LESS 的功能，但目前没有计划开发它。目前在 LESS（和 SASS）中，您必须使用已经建议的解决方案之一，并传递一个附加变量。

Answer 5

使用 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