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

Posted 2023-03-06

【中文标题】有没有办法一次为 2 个 css 属性分配相同的值？

【英文标题】：Is there a way to assign the same value to 2 css properties at once?

【发布时间】：2017-02-14 08:27:08

【问题描述】：

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

就像：

.c1, c2 sameValue

而是像这样：

.c2  background-color:, color: sameValue

【问题讨论】：

好吧，您可以将 sameValue 分配给一个变量，并将该变量用于您的两个属性 - 但我认为不能像您所写的那样完成。

LESS：@c1: red@c2: @c1，在 SASS 中相同：$c1: red$c2: $c1。在 Stylus 中，您可以获得另一个属性的值：stylus-lang.com/docs/variables.html#property-lookup。在 CSS 中，你有 currentColor 和自定义属性来获得类似的东西

【参考方案1】：

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

【参考方案2】：

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

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

.demo
  color: red
  background-color: @color

产生这个 CSS：

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

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

【讨论】：

“但目前还没有开发它的计划”——实际上是一年多以前it's implemented。只是没有足够的人力资源来完善即将发布的 v3 的所有新功能。

抱歉，我不知道。我希望新的 v3 版本能在短时间内到来

【参考方案3】：

你不能用 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）好的，所以我们可以通过警卫。 获取属性名称：在列表的第一项上使用LESS's extract()（我们需要说@i + 1，因为我们在0 开始了@i 计数器。我们也可以开始@i在1，并用when (@i < (length(@properties) + 1)) 保护，但这更难阅读） 最后：写样式。 interpolate the variable 将属性名称 (@property) 保存为字符串 (@property)，并将我们最初在 @987654357 中传递给 .properties 的值赋予它@(@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)

【讨论】：

编辑：再三考虑，我更喜欢...@i:1) when (@i <= length(@properties)) @property: extract(@properties, @i);...

【参考方案4】：

如果您的 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;

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

【参考方案5】：

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

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

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