在另一个样式中包含样式

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 来做到这一点。您需要使用LESS或SASS/SCSS来生成 CSS。

语法示例在这里：

较少的

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

社会保障体系

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