Rails:使用Sass的@import而不是* = require的缺点
我决定使用Sass的@import
而不是Sprocket的*=require
。Rails:使用Sass的@import而不是* = 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会慢些?
Rails Asset Pipeline指南实际上建议使用Sass的@import而不是Sprockets * = require如果您有多个Sass文件。
下面是从滑轨资产管道指导报价:
“如果你想使用多个萨斯文件,你通常应该使用的Sass @import规则,而这些链轮指令的使用链轮指令,萨斯文件存在自己的范围内,使变量或混入只有他们在被定义文档中可用。(http://guides.rubyonrails.org/asset_pipeline.html)”
这还建议SASS护栏宝石Github的页面(https://github.com/rails/sass-rails)上。以下是该页面的报价:
“Sprockets提供了一些指令,它们放置在require,require_tree和require_self注释中,不要在SASS/SCSS文件中使用它们,它们非常原始,不能很好地工作使用Sass文件,而是使用Sass的原生@import指令,这些指令是sass-rails自定义的,以便与您的Rails项目的约定集成。“
目前没有任何显著的缺点,以这种方式,实际上有相当多的好处(包括但不一定局限于):
主要优势来自于一个事实,即SASS @import创建一个全局名称空间,而Sprockets指令则不会。
编译将会加快开发速度,因为每次进行每次部分@导入时,它都不必重新编译所有供应商的mixin。
使用@import全局命名空间创建一个沃尔夫效果,其中对团队的开发人员往往定义和重用他们的变量,他们应该(在变量文件),而不是在更具体的文件。例如,如果未在全局变量文件(http://pivotallabs.com/structure-your-sass-files-with-import/)中定义z-索引可能会变成一场噩梦。
资产管道对待Sass @import的方式与对待Sprockets不同。在导入的情况下,每次保存都会经过并且每次都编译所有的导入,无论您保存了哪个部分。 Sprockets在样式表中处理的方式是,只有保存的部分将重新编译,然后在刷新时在本地注入页面。这使得链轮平均速度比平均速度快得多,尽管使用@import确实有一些好处,如本主题其他地方所列。关于这个问题的一个很好的阅读可以在这里通过树中找到:
http://blog.teamtreehouse.com/tale-front-end-sanity-beware-sass-import
如果你想知道使用多种进口产品是否会创建多个HTTP请求,从而产生额外开销,这是什么SASS网站有什么看法:
萨斯建立在目前的CSS @import的顶部,但不是需要一个HTTP请求,萨斯将要导入,并与你导入到这样你就可以提供服务的文件结合起来的文件一个CSS文件到Web浏览器。
我在开发时经历了非常缓慢的加载时间,当我仅使用@imports时,特别是如果使用bootstrap-sass和几个选择指南针组件时。我仍然试图研究这个问题,但我并不乐意等待10秒钟才能在dev中加载页面。 – LessQuesar
@LessQuesar:你看到的是所有导入文件的编译和执行,无论它们是否已经更改。链轮没有这个挫折。链轮只重新编译更改的文件,检出下面列出的树屋文章! – bkunzi01