包括另一种风格的风格

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。

这里的语法示例：

<强> 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 2

你需要看看sass或更少它们是你最好的选择。

sass here

少here

Answer 3

您可以使用sass或更少，但更基本的轻微解决方法只是列出您的CSS中的元素，如下所示：

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

Answer 4

看不到任何好处。您要求的不是标准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中的所有内容。这有什么不对？