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

Question

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

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

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

不幸的是,SASS对我来说并不是那么清楚.SASS已经内置了使用的连接@import.

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

Answer 1

Sprockets在连接之前将所有导入转换为CSS,因此它不能用于跨文件共享mixin和变量.我猜这只是因为你可以通过这种方法导入SASS,LESS和CSS文件.

所以这就是我的方式:

• 如果我要包含ERB(主要用于asset_path()调用),我将它们放在我的主文件application.css.scss.erb中
• 如果我想要包含我想要包含的CSS,我需要通过Sprockets,例如 //=require jquerymobile
• 在同一个文件中,我使用SASS @import命令显式加载所有文件.@ import'ed文件中没有一个可能是.erb.
  1. 加载基本内容(例如重置)和使用mixins导入
  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资产管道,因此您的里程可能会有所不同.如果我发现其他有趣的东西,我会尝试回来更新.