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

我想问的是有点奇怪，我想，但我没有别的办法。
有没有办法做到在现实生活中这种伪CSS规则：
让我们说我有规则：如何在css中使用另一个规则中的规则？

.myCssRule1{ color:red; }

我不能（不愿）去改变它，但我需要使用它在另一个规则，我会这样做：

.myCssRule2{ 
    .myCssRule1 
}

就像从另一个里面调用方法。
任何本地方式或JS库来做到这一点？

来源

2013-02-14 Dabbas

不可能。除了'@ media'指令之外，CSS规则不能嵌套。 – 2013-02-14 17:29:58

您可以使用像LESS这样的CSS框架来执行此操作。

您使用LESS编写的代码会被编译为“原生”css文件。

这个范例：退房Mixins：http://lesscss.org/

下面的代码直接从较少的链接

// 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); 
}

使用采取少，这是编译：

/* 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-14 17:29:46 cowls

我是LESS的初学者，所以我有问题PLZ：我创建了一个名为'style.less'的文件，并为less.js和'link'标签添加了'script'标签，用于我的新'style.less'，这就是它。为什么这不适合我？我还需要做更多的事吗？ – Dabbas 2013-02-14 18:55:37

@Dabbas：你还记得在链接标签中加入'rel =“stylesheet/less”'吗？ – Hubro 2013-02-14 20:54:05

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

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

来源

2013-02-14 17:30:32 cimmanon

不能样式使用纯CSS这样混入选择。我建议你取得结果的方式是创建一个类你想要共享的属性，例如：

.red { 
    color: red; 
}

，并且该类适用于所有你想要的是红色的元素。任何HTML元素都可以拥有类的任何金额：

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

一个更好方式（在我看来）是使用一个CSS预处理器，这是给你一个语言常有类似的CSS额外的功能，但编译到一个正常的CSS样式表。我最喜欢的一个是Stylus，但你也应该看看LESS,Sass和Compass。

来源

2013-02-14 17:39:42 Hubro

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

回答

相关问题