有没有一种方法可以一次将相同的值分配给2个CSS属性? [英] Is there a way to assign the same value to 2 css properties at once?

问题描述

使用 CSS，LESS或Sass 是否可以一次将相同的值分配给2个CSS属性?

Using CSS, LESS, or Sass can you assign the same value to 2 css properties at once?

就像:

.c1，c2 {sameValue}

但是像这样:

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

推荐答案

您无法使用CSS做到这一点.

You can't do this with CSS.

最简单的方法是使用变量.这是您在LESS中完成此操作的方式

The easiest way to do this is use a variable. Here's how you'd do that in LESS

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

和Sass中的同一件事

and the same thing in Sass

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

但是您也可以实现所需的功能.这是您可以在LESS中完成此操作的一种方法:

But you can also achieve the power you want. Here's one way you could do it in 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混合，传递一个 list (有时会在其他有关CSS/etc的SO问题中称为数组)的属性( .properties 的@properties 参数；在本示例中为 @props )和要分配给所有参数的值( .properties 的 @value 参数；在此示例中为 red ).
• 请注意， .properties 具有一个计数器参数 @i ，其默认值为 0 .
• .properties 具有较少的 CSS保护，检查 @i 是否小于传递的属性数量(保存在 @properties 中).这是！( @i 为 0 ，并且属性列表肯定至少为 1 .)
• 获取属性名称:使用 LESS的 extract()在列表中的第一项上(我们需要说 @i + 1 ，因为我们在 0 处启动了 @i 计数器我们也可以从 1 开始 @i ，并在(@i<(length(@properties)+ 1))保护>但这很难读)
• 最后:编写样式. 对变量进行插值将属性名称( @property )保留为字符串( @ {property} )，并为其赋予我们最初传递给 .properties的值( .demo ( @value )
中的
• 无循环！再次运行 .properties ，但请继续计数器 @i 之一: .properties(staysTheSame，staysTheSame，(@i + 1))
• .properties 将一直运行，直到遍历其 @properties 列表中的所有项目为止.之后， @i 将等于 length(@properties)，因此当(@i< length(@properties))守卫.

• .demo calls the .properties parametric LESS mixin, passing a list (sometimes called an array in other SO questions about CSS/etc) of properties (.properties's @properties parameter; in this example, @props) and the value to assign to all of them (.properties's @value parameter; in this example, red).
• note that .properties has a counter parameter @i with a default value of 0.
• .properties has a LESS CSS guard that checks to see if @i is less than the number of properties it was passed (held in @properties). It is! (@i is 0, and the properties' list is certain to be at least 1) Okay, so we're allowed past the guard.
• Get the name of the property: use LESS's extract() on the first item in the list (we need to say @i + 1 because we started the @i counter at 0. we could have also started @i at 1, and guarded with when (@i < (length(@properties) + 1)) but that's harder to read)
• At last: write the style. interpolate the variable holding the property name (@property) as a string (@{property}), and give it the value we originally passed to .properties in .demo (@value)
• LESS loop! Run .properties again, but advance the counter @i one: .properties(staysTheSame, staysTheSame, (@i + 1))
• .properties will run until it's looped through all the items in its @properties list. After that, @i will equal length(@properties), so we won't pass the when (@i < length(@properties)) guard.

请注意，@ props可以在上面的 .test 中定义，也可以在 .test 可以访问它的任何位置进行定义，其值也相同.您可能最终会得到

Note that @props could be defined within .test, as above, or anywhere where .test will have access to it, and same for the value. You might end up with

@props: background-color, color;
@val: red;
@val2: green;
.properties {...}
.demo {
  border-color: @val2;
  .properties(@props, @val)
}
.demo2 {
  .properties(@props, @val2)
}

这篇关于有没有一种方法可以一次将相同的值分配给2个CSS属性?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！