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;
}

和萨斯一样的事情

$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，传递列表（有时在其他有关CSS等的SO问题中称为数组）属性（{{ 1}}＆＃39; .properties参数;在此示例中为@properties）以及要分配给所有参数的值（@props＆＃39; s .properties参数;在此示例中为@value）。
请注意，red的计数器参数.properties的默认值为@i。
0有一个CSS guard，用于检查.properties是否小于传递的属性数量（@i中保留）。它是！（@properties为@i，属性列表肯定至少为0）好的，我们可以通过警卫。
获取媒体资源的名称：在列表中的第一项上使用LESS's extract()（我们需要说1，因为我们在@i + 1启动了@i计数器。我们也可以在0开始@i，并使用1进行保护，但这很难阅读）
最后：编写样式。 interpolate the variable将属性名称（when (@i < (length(@properties) + 1))）保存为字符串（@property），并为其赋值最初传递到@{property}（.properties）

.demo

LESS loop!再次运行@value，但提前计数器.properties：@i
.properties(staysTheSame, staysTheSame, (@i + 1))将一直运行，直到它在.properties列表中的所有项目中循环播放。在此之后，@properties将等于@i，因此我们无法通过length(@properties)后卫。

请注意，@ props可以在when (@i < length(@properties))内定义，也可以在.test可以访问它的任何地方定义，并且值相同。你最终可能会

.test

Answer 2

如果您的browser supports Custom Properties（AKA 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;
}

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

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;
}

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

Answer 5

使用手写笔，您可以使用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个css属性分配相同的值？

5 个答案: