在 Rails 中忽略扩展引导程序答案

【问题标题】：extending bootstrap is ignored in Rails在 Rails 中忽略扩展引导程序
【发布时间】：2014-02-13 10:07:07
【问题描述】：

我想这样做

.bip_control{
    @extend .form-control;
    color:red;
}

但生成的 css 看起来像

.bip_control{
  color: red;
}

我错过了什么吗？

【问题讨论】：

我正在使用 Ror 中的引导程序并且 @extend 规则没有问题。我认为，当您尝试扩展 .form-control （在引导样式表中定义）时，您无法看到您从样式表中扩展的类，因为您在自己的样式表中，我想。实际上，在建议的答案中，在 sassmeister 中，它正在导入定义规则且可见的引导样式表。

【解决方案1】：

我试用了您的代码，对我来说它似乎按预期工作。假设您在定义 .bip-control 时将引导文件导入到 Sass 文件中，因为这是您可以使用选择器扩展引导规则的唯一方法。我在 Sassmeister 上添加了一个示例：

@import "bootstrap";
.bip_control{
    @extend .form-control;
    color:red;
}

像这样导入引导程序应该包括您可以扩展的所有引导程序规则（请参阅here，但是您也可以只导入单个组件/mixins 文件，然后您只需要确保包含您想要扩展的规则及其依赖项）。

如果您查看生成的 CSS，从 #2015 行开始，您会发现所有 .form-contro 规则都使用 .bip_control 选择器扩展。
例如：

.form-control, .bip_control { ...
...
.form-control:focus, .bip_control:focus { ...
...

仅属于.bip_control 的所有其他属性都作为另一个规则集添加到其余导入的引导规则的末尾（或您定义过的任何位置）。如果您尝试扩展的规则未正确导入/包含，并且不适用于 @extend 指令，则此 CSS 规则集也将返回。

您可以从这个答案的示例中更好地了解@extend 的工作原理（以防我在上面的引导示例中展示得不够好）：SCSS - override an @extend with another @extend

【讨论】：