我應該使用@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

鏈接在鏈接之前將所有導入轉換爲CSS，因此它不能用於跨文件共享混合和變量。我猜這只是因爲你可以通過該方法導入SASS，LESS和CSS文件。

因此，這裏是我如何做到這一點：

• 如果我有ERB包括（大多爲asset_path()電話），我把它們放在我的主文件，application.css.scss.erb
• 如果我有我想包括的自營CSS，我需要通過鏈輪，例如//=require jquerymobile
• 在同一個文件中，我使用SASS @import命令顯式加載所有文件。儘管@ import'ed文件可能不是.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資產管道，所以您的里程可能會有所不同。如果我發現其他有趣的事情，我會盡力回覆&更新。

Answer 2

來解決它的最好方法是使用本地@import指令如下解釋：https://github.com/rails/sass-rails#important-note

這個問題已經在這裏找到答案：how to use sprockets imports with sass

希望這有助於！ :)

Answer 3

的青菜護欄寶石explicitly states不SASS文件使用require語法 - 使用SASS的@import語句來代替。