我应该使用@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.

我应该将所有部分更改为完整的 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?

推荐答案

Sprockets 在连接之前将所有导入转换为 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，例如//=需要 jquerymobile
• 在同一个文件中，我使用 SASS @import 命令显式加载所有文件.不过，@import 的所有文件都可能不是 .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屋！