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预处理器才能做到这一点。最受欢迎的是Sass和LESS。

Sass（http://sass-lang.com/）
LESS（http://www.lesscss.org/）

Answer 3

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

.red {
    color: red;
}

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

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

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

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

3 个答案: