Question

我决定使用Sass的@import而不是Sprocket的*=require。

我在 application.scss ：

中有这个

@import 'normalize';
@import 'font-awesome';
@import 'variables';

并在 blog.scss ：

中

@import 'application';

这样我就可以为不同的控制器设置单独的样式表（使我的代码更有条理）。

为了完成这项工作，我还在我的布局中添加了stylesheet_link_tag params[:controller]，然后将Rails.application.config.assets.precompile += %w( blog.css )行添加到我的 /config/initializers/assets.rb 文件中并重新启动了服务器

这种方法有什么缺点吗？ turbolinks 会变慢吗？

Answer 1

如果你有多个Sass文件，Rails Asset Pipeline指南实际上建议使用Sass的@import而不是Sprockets * = require。

以下是Rails Asset Pipeline指南中的引用：

“如果你想使用多个Sass文件，你通常应该使用Sass @import规则而不是这些Sprockets指令。当使用Sprockets指令时，Sass文件存在于它们自己的范围内，使变量或mixin仅在文档中可用他们的定义是。（http://guides.rubyonrails.org/asset_pipeline.html）“

这也推荐在sass-rails gem Github页面（https://github.com/rails/sass-rails）上。以下是该页面的引用：

“Sprockets提供了一些放在注释中的指令，名为require，require_tree和require_self。不要在你的SASS / SCSS文件中使用它们。它们非常原始，不适用于Sass文件。相反，使用Sass的本机@import指令，其中sass-rails已经过定制，可以与Rails项目的约定集成。“

这种方法没有任何明显的缺点，实际上有很多好处（包括但不一定限于）：

主要优点来自SASS @import创建全局命名空间，而Sprockets指令不创建。
编译会在开发过程中加快一些，因为每次部分@imp导入时都不需要重新编译所有供应商mixin。
使用@import全局命名空间会创建一个Whorfian效果，团队中的开发人员倾向于定义和重用他们应该的变量（在变量文件中），而不是更具体的文件。例如，如果未在全局变量文件（https://content.pivotal.io/blog/structure-your-sass-files-with-import）中定义，z索引可能会成为一场噩梦。

Answer 2

资产管道对待Sass @imports的方式与处理Sprockets的方式不同。在导入的情况下，每次保存都将通过并每次编译所有导入，无论您保存哪个部分。在样式表中处理Sprockets的方式是，只有您保存的部分将重新编译，然后在刷新时本地注入页面。这使得链轮平均比导入速度快得多，尽管使用@import确实具有在该线程上其他地方列出的一些好处。树屋可以在这里找到关于这个主题的好读物：

http://blog.teamtreehouse.com/tale-front-end-sanity-beware-sass-import

Answer 3

如果您想知道使用多个导入是否会创建多个HTTP请求，从而产生开销，那么这就是sass网站所说的：

Sass建立在当前CSS @import之上但不需要HTTP请求，Sass将获取您要导入的文件并将其与您导入的文件合并，以便您可以提供单个CSS文件到网络浏览器。

Rails：使用Sass的@import而不是* = require的缺点

3 个答案: