使用CSS, LESS, or Sass 可以一次为 2 个 css 属性分配相同的值吗？
就像：
.c1, c2 {sameValue}
而是像这样：
.c2 { background-color:, color: sameValue}
【问题讨论】：
sameValue 分配给一个变量，并将该变量用于您的两个属性 - 但我认为不能像您所写的那样完成。
@c1: red@c2: @c1，在 SASS 中相同：$c1: red$c2: $c1。在 Stylus 中，您可以获得另一个属性的值：stylus-lang.com/docs/variables.html#property-lookup。在 CSS 中，你有 currentColor 和自定义属性来获得类似的东西
使用 Stylus，您可以使用 iteration 和 interpollation 执行此操作：
.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
【讨论】：
在Stylus 中可以进行属性查找，它允许您使用当前或最近的父祖先中的属性并将其用于计算。
对于你的具体情况，你可以写：
.demo
color: red
background-color: @color
产生这个 CSS：
.demo {
color: red;
background-color: red;
}
它是一个feature asked also for LESS，但目前没有开发它的计划。目前在 LESS（和 SASS）中，您必须使用已经建议的解决方案之一，并传递一个附加变量。
【讨论】：
你不能用 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 参数的列表（在其他关于 CSS/etc 的 SO 问题中有时称为数组）；在此示例为@props）以及分配给所有这些参数的值（.properties 的@value 参数；在此示例中为red）。.properties 有一个计数器参数@i，默认值为0。.properties 有一个 LESS CSS guard，用于检查 @i 是否小于它通过的属性数量（保存在 @properties 中）。它是！ （@i 是 0，属性列表肯定至少是 1）好的，所以我们可以通过警卫。extract()（我们需要说@i + 1，因为我们在0 开始了@i 计数器。我们也可以开始@i在1，并用when (@i < (length(@properties) + 1)) 保护，但这更难阅读）@property) 保存为字符串 (@{property})，并将我们最初在 @987654357 中传递给 .properties 的值赋予它@(@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)
}
【讨论】：
...@i:1) when (@i <= length(@properties)) {@property: extract(@properties, @i);...
如果您的 browser supports Custom Properties（也称为 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;
}
就能够链接属性而言，我不知道任何允许该语法的预处理器或规范。
【讨论】：
我认为你不能按照你描述的方式，你需要使用一个变量。但是，您可以使用共享相同命名空间的属性来实现类似的效果。
.funky {
font: {
family: fantasy;
size: 30em;
weight: bold;
}
}
http://sass-lang.com/documentation/file.SASS_REFERENCE.html#nested_properties
【讨论】：