将风格包含在另一种风格

Question

所以我一直在思考这个问题，我不认为这存在。我也明白，我的逻辑我是反什么样式正试图适应，但让我们给它一展身手：

看看下面的例子：

// Example "template style" 
.blue_bold { 
     color: blue; 
     font-weight: bold; 
     /* other styles can go here */ 
} 

所以我们说，我想将它添加到我的页脚我会在我的HTML去：

<div class="blue_bold" id="footer"> 
     // Content goes here 
</div> 

这是完美的，但如果我想将该元素添加到我的一些元素。说我想将它添加到我的导航，以及，我将不得不为该类添加到每个元素：

<div class="blue_bold" id="navigation"> 
     // Content 
</div> 
.... 
<div class="blue_bold" id="footer"> 
     // Content 
</div> 

我的问题是，作为放在附近通过一类或样式声明它，是有没有办法将样式“附加”到我的样式表中的另一种样式？ （为例:)

#navigation, #footer { 
     attach_style(".blue_bold"); 
} 

这样我可以通过创建“基本样式”尽量减少我的代码，然后附上我的样式表中的样式个人风格？这再次只是一个问题，而不是我想表达的意思，但我认为鉴于上述情况，对于使用说品牌指南文档并希望将特定样式附加到单个样式而不去去的人来说，这将是一个“高兴”。该HTML做到这一点。

任何想法？这是否存在？

Answer 1

无法看到任何好处。你要求的不是标准的CSS。 您可以定义这个使用类blue_bold

.blue_bold { 
    color: blue; 
    font-weight: bold; 
    /* other styles can go here */ 
} 

所有元素对于该块

<div class="blue_bold" id="navigation"></div> 

你可以简单地添加其他的声明是这样的：

#navigation, #footer { 
    background: black; 
    color: red; 
} 

一切从.blue_bold会使用除非被覆盖。它有什么问题？

Answer 2

你不能用纯CSS做到这一点。您需要使用LESS或SASS/SCSS来生成您的CSS。

语法的例子在这里：他们

LESS

.blue_bold { 
    color: blue; 
    font-weight: bold; 
} 
#navigation, 
#footer { 
    .blue_bold; 
} 

SCSS

.blue_bold { 
    color: blue; 
    font-weight: bold; 
} 
#navigation, 
#footer { 
    @extend .blue_bold; 
} 

Answer 3

你需要对SASS以下一起来看看是你的最佳选择。

青菜here

少here

Answer 4

您可以使用青菜或更小，但更基本的轻微的解决方法是只是列出你的CSS中的元素，像这样：

#navigation, 
#footer, 
.some-other-element, 
.another-element 
{ 
     // css styles go here that you want to apply to each element listed above 
}