在Rails中使用sass的正确方法

Question

首先，我已经在一个文件中编写了所有CSS样式，但事情变得复杂，所以我将我的sass文件分成了文件夹。我发现了一篇来自互联网的文章，我跟着它。它说“如果我们把_放在sass文件前面，它就不会被编译器索引”

• 创建了3个文件夹
• 像那样创建文件_test_name.scss
• 为每个文件夹创建_index.scss文件并导入所有其他scss 该文件夹中的文件
• 创建main.scss文件并导入其中的所有index.scss文件。

一切正常但如果我在其他文件夹的某个地方使用颜色变量，那就没有了。它给了我未定义的变量错误消息。之后我导入了颜色scss文件然后它工作。但这很奇怪吗？它应该无需导入颜色scss文件。现在问题是如果我在开发人员工具中看到我的样式，相同的样式重复三次！请检查图像

我在这里做错了吗？

Answer 1

使用Sprockets指令与SASS不兼容。

  

Sprockets提供了一些放在注释中的指令   称为require，require_tree和require_self。不要使用它们   你的SASS / SCSS文件。它们很原始，效果不好   用Sass文件。相反，使用Sass的原生@import指令   sass-rails已经过定制，可以与您的会议进行整合   Rails项目。

因此，您应该做的第一件事是删除application.scss和leave the compilation to SASS *中的任何sprockets指令。这是最有可能的解释，为什么你看到相同的样式被应用三次require_tree .玷污了任何部分。

所以你应该这样做：

@import "test_name"

sass-rails提供了globbing功能，可以用来要求目录中的所有部分。

@import "mixins/*" 
@import "mixins/**/*"

然而，通常最好手动导入依赖项，因为加载顺序很难确定。