为多个属性设置相同的值 (CSS)答案

【问题标题】：Set the same value to multiple properties (CSS)为多个属性设置相同的值 (CSS)
【发布时间】：2022-04-25 16:07:55
【问题描述】：

有没有办法将多个 CSS 属性设置为一个值？

border-left, border-right: 1px solid #E2E2E2;

你可以用选择器做什么？

.wrapper, .maindiv { ... }

【问题讨论】：

不，但SASS 变量可以让你接近。想想看，你应该为下一个版本的 SASS 提出这个建议。最糟糕的情况是你的想法被拒绝了。
好电话，我写信给lesscss

标签： css

【解决方案1】：

不。但是对于您的示例，您可以这样做：

border: solid #E2E2E2;
border-width: 0 1px;

top、right、bottom 和 left 可以有单独值的属性（例如，border-*、margin、padding）通常可以组合在一个属性中。

【讨论】：

恭喜你的答案是最有效的 5 个字节
看来如果你只想设置 top 和 left 你有最大的字节数，因为你必须为 right 和 bottom 指定 0。

【解决方案2】：

不可能，除非你这样做：

border: 1px solid #E2E2E2;

..它在所有方面设置相同的边框。如果要单独控制它们，则必须将它们编写为单独的语句。

请注意，在某些情况下，您可以为一个属性设置多个值，但不能在一个语句中设置多个属性和一个值。

【讨论】：

【解决方案3】：

使用纯 css 是不可能的，但您可以查看 scss 或 less，他们可能会为您的问题提供解决方案。

使用纯 css 的解决方案如下：

border: 1px solid #E2E2E2;
border-width: 0px 1px;

【讨论】：

我以前看过 sass。这不是一个大问题，我只是好奇 :) 谢谢。

【解决方案4】：

如果你使用的是 sass，试试这个：

@mixin border($properties , $value){
    @each $property in $properties{
        border-#{$property}: $value;
    }
}

selector{
    @include border(left right, 1px solid #E2E2E2);
}

【讨论】：

【解决方案5】：

CSS 不允许这样的控制。一种解决方法是使用更大的规则，然后对其进行限制：

border: 1px solid #E2E2E2;
border-top: 0;
border-bottom: 0;

但你最终会得到更多的代码。另一种解决方案是使用 CSS “编译器”，例如 SASS 或 Less

【讨论】：

【解决方案6】：

如果属性是相关的，例如border-left 和border-right，通常有一个共同的属性可以让您设置它们：

border: 1px solid #e2e2e2;

另一方面，有一些像 Less CSS 这样的库扩展了 CSS，以便您可以轻松地对相关的属性和属性进行分组。

【讨论】：