我应该使用@import还是清单文件? [英] Should I use @import or manifest files?

问题描述

Rails 3.1通过引入清单文件引入了一种组织JS和CSS的新方法.例如，application.js可能看起来像这样:

Rails 3.1 introduces a new way of organizing both JS and CSS with the introduction of manifest files. For example, application.js might look like this:

//= require jquery
//= require jquery-ui
//= require jquery_ujs
//= require_tree .

这将获取Jquery的各个部分以及您自己的所有JS，将它们连接在一起，并将其作为单个文件提供给客户端.很简单.

This will grab various bits of Jquery, all of your own JS, concatenate them together and serve it as a single file to clients. Simple enough.

不幸的是，使用SASS，图片对我来说不太清楚. SASS已经使用@import内置了串联.

Unfortunately the picture is not so clear to me with SASS. SASS already has concatenation built in using @import.

我应该将所有的partials更改为完整的SASS文件，然后使用清单文件将它们连接起来，还是继续使用@import?为什么?

Should I change all of my partials into full SASS files and then concatenate them using the manifest file or continue using @import? Why?

推荐答案

链轮在连接之前将所有导入都转换为CSS，因此不能用于在文件之间共享mixin和变量.我猜测这将保持原样，因为您可以通过该方法导入SASS，LESS和CSS文件.

Sprockets converts all imports to CSS before concatenating, so it can't be used to share mixins and variables across files. I'm guessing this is going to stay that way just because you can import SASS, LESS and CSS files via that method.

这就是我的做法:

• 如果要包含ERB(主要用于asset_path()调用)，请将它们放入主文件application.css.scss.erb
• 如果我已经提供了要包含的CSS，则需要通过Sprockets(例如， //=require jquerymobile
• 在同一文件中，我使用SASS @import命令显式加载所有文件.尽管@imported文件都不能是.erb.

• If I have ERB to include (mostly for asset_path() calls), I put them in my main file, application.css.scss.erb
• If I have vendored CSS I want to include, I require it via Sprockets, e.g. //=require jquerymobile
• In that same file, I use the SASS @import command to explicitly load all files. None of the @import'ed files may be .erb though.

1. 加载基本内容(例如，重置)并使用mixins导入
2. 声明变量
3. 导入特定样式

这是我的app.css目前的外观.不要忘记;"和引号:

Here's how my app.css looks at the moment. Don't forget the ";" and the quotes:

// Using SASS import is required for variables and mixins to carry over between files.
@import "reset.css.scss";
@import "mixins.css.scss";

$color_base: #9b2d31;
$color_background: #c64e21;

// Using asset_path is important for browsers to use versioned url for the asset.
// This lets us do aggressive caching.
$logo-url: url(<%= asset_path("logo.png") %>);

@import "application/layout.css.scss";
@import "application/sidebar.css.scss";
@import "application/videos.css.scss";
@import "application/pages.css.scss";
...

请注意，我仍在探索Rails 3.1资产管道，因此您的里程可能会有所不同.我会尽力回来的如果我发现其他有趣的内容，请进行更新.

Note that I'm still exploring the Rails 3.1 asset pipeline, so your mileage may vary. I'll try to come back & update if I find anything else interesting.

这篇关于我应该使用@import还是清单文件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！