0

我想我所要求的有点奇怪，但我没有其他办法。
有没有办法在现实生活中执行这个伪 CSS 规则：
假设我有规则： 

.myCssRule1{ color:red; }

而且我不能（不想）改变它，但我需要在另一个规则中使用它，我将这样制定： 

.myCssRule2{  
   .myCssRule1
}

就像从另一个内部调用方法一样。
任何本机方式或 JS 库来做到这一点？

4

3 回答 3

2

您可以使用像 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;
}
于 2013-02-14T17:29:46.713 回答
1

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

.red {
    color: red;
}

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

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

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

于 2013-02-14T17:39:42.923 回答
0

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

于 2013-02-14T17:30:32.737 回答