如何在CSS中的另一个规则中使用规则？

Question

我觉得我的要求有点奇怪，但我没有其他办法。
有没有办法在现实生活中做到这个伪CSS规则：
假设我有规则：

.myCssRule1{ color:red; }

我不能（不想）更改它，但我需要在我将制定的另一条规则中使用它：

.myCssRule2{  
   .myCssRule1
}

就像从另一个方法内部调用方法一样。
有任何本地方式或 JS 库可以做到这一点吗？

Answer 1

您可以使用 LESS 等 CSS 框架来执行此操作。

您使用 LESS 编写的代码随后会编译成“本机”CSS 文件。

这里有一个例子：查看

Mixins

：http://lesscss.org/

下面的代码直接取自 LESS 链接

// LESS

.rounded-corners (@radius: 5px) {
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  -ms-border-radius: @radius;
  -o-border-radius: @radius;
  border-radius: @radius;
}

#header {
  .rounded-corners;
}
#footer {
  .rounded-corners(10px);
}

使用 less 将其编译为：

/* Compiled CSS */

#header {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
}
#footer {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
}

Answer 2

您无法使用纯 CSS 以这种方式将样式混合到选择器中。我建议实现结果的方法是创建一个具有您想要共享的属性的类，例如：

.red {
    color: red;
}

并将该类应用于所有想要变为红色的元素。任何 HTML 元素都可以有任意数量的类：

<div class="myCssRule1 myCssRule2"></div>

---

一个更好的方法（在我看来）是使用 CSS 预处理器，它是一种通常类似于 CSS 的语言，可以为您提供额外的功能，但可以编译为普通的 CSS 样式表。我最喜欢的是 Stylus，但您还应该看看 LESS、Sass 和 Compass。

Answer 3

这现已成为 CSS 标准的一部分：https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_nesting/Using_CSS_nesting

不再需要 SASS 或 LESS 来执行此操作。

您可能还想探索 CSS 组合器，这在嵌套规则时非常有用：https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators

Answer 4

您需要一个 CSS 预处理器来做到这一点。 最受欢迎的是 Sass 和 LESS。

• Sass (http://sass-lang.com/)
• 少 (http://www.lesscss.org/)