你能在另一个 CSS 类中引用一个 CSS 类吗

Question

我研究过的一切都提出了嵌套 CSS 的方法。那不是我想要做的。

我想要完成的

我试图在另一个 CSS 类中引用一个 CSS 类以限制复制。就像使用变量一样。

例子

我正在使用 Bootstrap 作为我的设计基础。在页脚部分，有一些列，每个列都指定了以下类：

col-lg-3 col-md-6 mb-5 mb-lg-0

我想上一堂课

footer-section

并参考上面的那些课程。那样的话，如果我想改变这些部分的显示方式，我不必逐一更新，只需更新 CSS 类即可。

示例代码

Bootstrap CSS Code

.col-lg-3 {
    flex: 0 0 auto;
    width: 25%;
}
.col-md-6 {
    flex: 0 0 auto;
    width: 50%;
}
.mb-5 {
  margin-bottom: 3rem !important;
}
.mb-lg-0 {
    margin-bottom: 0 !important;
}

我希望我的

custom-footer.scss

看起来像什么：

footer {
    .footer-section {
        .col-lg-3, .col-md-6, .mb-5, .mb-lg-0
    }
  
    /* Other Code */
}

HTML

<footer>
     <div class="footer-section">
         ... Section content
     </div>
     <div class="footer-section">
         ... Section content
     </div>
     <div class="footer-section">
         ... Section content
     </div>
</footer>

在实践中

使用上面的代码，只需更新 CSS

footer .footer-section {}

声明

，就可以轻松更改页脚中的所有部分

理由

我知道我可以将每个类的 Bootstrap 代码复制到

.section

区域，但那将是代码重复。

我知道页脚部分是集中的，只有几个区域，所以维护/更新会很容易；但是，我想在我网站的其他区域使用这种技术。我发现我经常在我的网站中一起使用 Bootstrap 类，而不是更新每个页面上的每个声明，只需更改 CSS 代码就很容易了。

问题

那么，重申我的问题，是否可以在另一个 CSS 类中“引用”而不是嵌套 CSS 类？

提前感谢您的帮助。

快乐编码！！！

Answer 1

你似乎在寻找https://sass-lang.com/documentation/at-rules/extend

.error:hover {
  background-color: #fee;
}

.error--serious {
  @extend .error;
  border-width: 3px;
}