Должен ли я использовать файлы @import или манифеста?

Rails 3.1 представляет новый способ организации JS и CSS с введением файлов манифеста. Например, application.js может выглядеть так:

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

Это будет захватывать различные биты JQuery, все ваши собственные JS, объединяют их вместе и подают в виде одного файла клиентам. Достаточно просто.

К сожалению, картина не так понятна для меня с SASS. SASS уже имеет встроенную конкатенацию с помощью @import.

Должен ли я изменить все мои частичные файлы на полные файлы SASS и затем объединить их с помощью файла манифеста или продолжить использование @import? Почему?

Ответ 1

Sprockets преобразует все импорт в CSS перед конкатенацией, поэтому он не может использоваться для обмена миксинами и переменными между файлами. Я предполагаю, что это останется таким, потому что вы можете импортировать файлы SASS, LESS и CSS с помощью этого метода.

Итак, вот как я это делаю:

Если у меня есть ERB для включения (в основном для вызовов asset_path()), я помещаю их в свой основной файл, application.css.scss.erb
Если у меня есть готовый CSS, который я хочу включить, я требую его через Sprockets, например. //=require jquerymobile
В этом же файле я использую команду SASS @import для явной загрузки всех файлов. Однако ни один из файлов @import'ed не может быть .erb.
- загрузите основной материал (например, reset) и импортируйте с помощью mixins
- объявлять переменные
- импортировать определенные стили

Вот как мой 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, поэтому ваш пробег может отличаться. Я попытаюсь вернуться и обновить, если найду что-нибудь интересное.

Ответ 2

Лучший способ решить эту проблему - использовать встроенную директиву @import, как описано здесь: https://github.com/rails/sass-rails#important-note

На этот вопрос уже был дан ответ: как импортировать импортные диски с помощью sass

Надеюсь, это поможет!:)

Ответ 3

sass-rails gem явно указывает не использовать синтаксис require с SASS файлами - используйте SASS @import.