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

Answer 2

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

Этого вопроса уже был дан ответ здесь: how to use sprockets imports with sass

Надеется, что это помогает! :)

Answer 3

В SASS рельсы драгоценный камень explicitly states не использовать синтаксис require с SASS файлов - использовать @import заявления Sass вместо этого.