我应该使用 @import 还是清单文件？

发布于 2024-11-08 21:00:49 字数 396 浏览 1 评论 0原文

Rails 3.1 通过引入清单文件引入了一种组织 JS 和 CSS 的新方法。例如，application.js 可能如下所示：

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

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

不幸的是，对于 SASS，我的情况不太清楚。 SASS 已经使用 @import 内置了串联功能。

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

原文

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 .

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.

Unfortunately the picture is not so clear to me with SASS. SASS already has concatenation built in using @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?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

蔚蓝源自深海 2024-11-15 21:00:49

Sprockets 在连接之前将所有导入转换为 CSS，因此它不能用于跨文件共享 mixin 和变量。我猜这将保持这种状态，因为您可以通过该方法导入 SASS、LESS 和 CSS 文件。

所以我是这样做的：

如果我要包含 ERB（主要用于 asset_path() 调用），我将它们放入我的主文件 application.css.scss.erb
如果我已经供应了 CSS 我想要包含，我通过 Sprockets 需要它，例如 //=require jquerymobile
在同一个文件中，我使用 SASS @import 命令显式加载所有文件。不过，@import 后的文件都可能不是 .erb。
1. 加载基本内容（例如重置）并使用混合导入
2. 声明变量
3. 导入特定样式

这是我的 app.css 目前的样子。不要忘记“;”和引用：

// 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 资产管道，因此您的情况可能会有所不同。我会尝试回来&如果我发现其他有趣的事情，请更新。

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.

So here's how I do it:

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. load the basic stuff (e.g. reset) and imports with mixins
2. declare variables
3. import the specific styles

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";
...

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.

回复收藏 0 原文