我研究的所有内容都提出了嵌套CSS的方法。这不是我想做的。
更新：与我相关的导致它关闭的问题没有帮助的答案。大多数答案都是几年前的。一个答案提到使用 LESS，所以我会问它如何与 Rails 7 资产管道配合使用。
我正在努力实现的目标
我正在尝试引用另一个 CSS 类中的 CSS 类以限制复制。很像使用变量。
例
我正在使用Bootstrap作为我的设计基础。在页脚部分中，有一些列，每个列都指定了以下类：
col-lg-3 col-md-6 mb-5 mb-lg-0
我想创建一个类footer-section并引用上面的这些类。这样，如果我想更改部分的显示方式，我不必遍历每个部分进行更新，只需更新 CSS 类即可。
引导代码示例
.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>
在实践中
使用上面的代码，只需更新 CSSfooter .footer-section {}声明即可轻松更改页脚中的所有部分
我的开发环境
我正在使用Ruby on Rails进行开发，我的资源管道如下所示：
app/assets/stylesheets--
|
pages--
| |
| legal_styles.scss
|
_variables.css
application.css
changed_bootstrap.scss
custom_text_styles.scss
custom.scss
footer_styles.scss
vendor/assets/stylesheets--
|
animate.min.css
bootstrap.min.css
bootstrap.min.css.map
application.css Code
/* application.css file
*= require _variables
*= require bootstrap.min
*= require animate.min
*= require font-awesome
*= require_tree .
*= require_self
*/
更新：因此，根据评论和建议的答案，我在footer_styles.scss文件中尝试了这个：
.footer-section {
@extend .col-lg-3;
@extend .col-md-6;
@extend .mb-5;
@extend .mb-lg-0;
}
但是，我收到一个编译错误，指出"找不到目标选择器"。我呼吁在footer_styles.scss被召唤之前召集bootstrap.min.css。因此，选择器在@extended之前应该在编译的application.css文件中可见。所以，我不确定那里发生了什么，或者我是否做错了什么。
理由
我知道我可以将每个类的 Bootstrap 代码复制到.section区域，但这将是代码的重复。
我知道页脚部分是集中的，只有几个区域，所以维护/更新会相当容易;但是，我想在我网站的其他区域使用这种类型的技术。我看到我经常在我的网站上一起使用 Bootstrap 类，而不是更新每个页面上的每个声明，只需更改 CSS 代码就很容易。
问题
是否可以在另一个 CSS 类中"引用"而不是嵌套 CSS 类？
你似乎在寻找 https://sass-lang.com/documentation/at-rules/extend
.error:hover {
background-color: #fee;
}
.error--serious {
@extend .error;
border-width: 3px;
}
这里有很多问题/想法需要解决。
不要使用链轮指令
#= require和#= require_tree非常原始，读取每个文件，然后将它们逐个传递到编译器中。然后将结果串联并馈送到任何后置处理器中。这不适用于 Sass 或任何其他类型的预编译器，在这些预编译器中，您可以使用另一个文件中定义的变量或函数。
因此，您希望将资产清单更改为 SCSS 文件，并使用让 SASS 编译器完成工作。
使用已弃用的 LibSass sass 编译器，您会遇到@includes
// application.scss
@include 'variables';
@include 'changed_bootstrap';
@include 'custom_text_styles';
@include 'custom';
@include 'footer_styles';
请注意，要包含的文件的名称应以下划线为前缀，因为它们不打算编译成单个文件。
然而，现代的方式是使用Dart-Sass和SASS模块：
// style.scss
@use 'variables';
@use 'changed_bootstrap';
这修复了许多与@includes有关的头痛问题，这实际上是 SASS 编译器破坏的 CSS 功能。
CSS 中的继承
你必须记住，CSS被设计为一种简单的声明性语言。它没有继承，因为您可以从另一个规则继承。
CSS最近确实获得了自定义属性(变量)，这至少可以让您重用值。
复制粘贴 SASS 样式
Sass 有@extend它基本上只是将一个 CSS 规则的所有属性复制到另一个：
.foo {
color: "red";
}
.bar {
@extend .foo;
display: block;
}
它编译成：
.foo {
color: "red";
}
.bar {
color: :red;
display: block;
}
但是，您定义的规则必须位于 SASS 编译器先前加载的文件中。虽然 SASS 可以加载普通的 CSS 文件，因为 SASS 是一个超集，但我不能保证你在那里做的事情真的会起作用。
虽然 Bootstrap过去曾从 Less 移植到 Sass，以便您可以重复使用其中的一部分，但请记住 Bootstrap 已有 11 年的历史，并且像牛奶一样老化。如果你想使用它，只需忍受这样一个事实，即你的HTML将成为纯粹的表示类的汤。