css - 在另一个样式中包含样式

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

SCSS

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