如何在 rails/sass 中重用（扩展）引导 css 类答案

【问题标题】：How to reuse (extend) bootstrap css classes in rails/sass如何在 rails/sass 中重用（扩展）引导 css 类
【发布时间】：2014-03-16 16:53:24
【问题描述】：

我在 core.scss 文件中 @import "boostrap" 也导入其他 scss 文件（例如：_modals.css）。

在 modals.css 我想扩展一些引导类：

.modal-container {
  @extend .row;
}

并且extend没有按预期工作：

第 42 行的警告 ....../_modals.css.scss： “.row”未能@extend “.row”。未找到选择器“.row”。在 Sass 的未来版本中，这将是一个错误。使用“@extend .row !optional" 如果扩展应该能够失败。

我让它工作的唯一方法是再次@import "bootstrap" _modals.scss 但这实际上包括该文件中的整个引导程序...

另一种解决方案是移动所有扩展 css 的定义 core.css 文件 - 在这种情况下 - 结构更少的 css ...

我应该如何正确地做呢？

【问题讨论】：

【解决方案1】：

问题是因为我还通过 sass require/require_tree 命令导入了文件。

 *= require_tree ./autoinclude

如果所有文件都通过@import 函数导入，一切正常！

@import "autoinclude/*";

【讨论】：

【解决方案2】：

.row 必须位于前面代码行中的同一文件中。

@extend 不是很好，你不能在媒体查询中使用它，如果你过度使用它，你最终会在代码中引入不一致。

在另一个文件中定义一个 mixin 并使用 @import 代替

【讨论】：