Правильная структура активов SCSS в Rails

Итак, у меня есть app/assets/stylesheets/структура каталогов, которая выглядит примерно так:

   |-dialogs
   |-mixins
   |---buttons
   |---gradients
   |---vendor_support
   |---widgets
   |-pages
   |-structure
   |-ui_elements

В каждом каталоге есть несколько партиалов sass (обычно * .css.scss, но один или два * .css.scss.erb).

Я могу предположить многое, но rails ДОЛЖЕН автоматически компилировать все файлы в этих каталогах из-за файла *= require_tree .application.css, верно?

Недавно я попытался реструктурировать эти файлы, удалив все цветовые переменные и поместив их в файл в корневой app/assets/stylesheetsпапке (_colors.css.scss). Затем я создал в корневой app/assets/stylesheetsпапке файл с именем master.css.scss, который выглядит так:

// Color Palette 
@import "colors";

// Mixins
@import "mixins/buttons/standard_button";
@import "mixins/gradients/table_header_fade";
@import "mixins/vendor_support/rounded_corners";
@import "mixins/vendor_support/rounded_corners_top";
@import "mixins/vendor_support/box_shadow";
@import "mixins/vendor_support/opacity";

Я действительно не понимаю, как rails обрабатывает порядок компиляции ассетов, но это явно не в мою пользу. Похоже, что ни один из файлов не осознает, что у них есть какие-либо импортируемые переменные или миксины, поэтому он выдает ошибки, и я не могу скомпилировать.

Undefined variable: "$dialog_divider_color".
  (in /home/blah/app/assets/stylesheets/dialogs/dialog.css.scss.erb)

Undefined mixin 'rounded_corners'.
  (in /home/blah/app/assets/stylesheets/widgets.css.scss)

Переменная $dialog_divider_colorчетко определена в _colors.css.scss и _master.css.scssимпортирует цвета и все мои миксины. Но, видимо, эту памятку Рилс не получил.

Есть ли способ исправить эти ошибки, или мне придется прибегать к возвращению всех моих определений переменных обратно в каждый отдельный файл, а также ко всему импорту миксинов?

К сожалению, этот парень не думает, что это возможно, но я надеюсь, что он ошибается. Любые мысли приветствуются.

Проблема с CSS в том, что вы не хотите автоматически добавлять все файлы. Порядок, в котором ваши листы загружаются и обрабатываются браузером, очень важен. Таким образом, вы всегда будете явно импортировать все свои css.

В качестве примера допустим, что у вас есть лист normalize.css , чтобы получить вид по умолчанию вместо всех ужасных реализаций браузера. Это должен быть первый файл, загружаемый браузером. Если вы просто случайным образом включите этот лист где-нибудь в свой импорт css, тогда он переопределит не только стили браузера по умолчанию, но также любые стили, определенные во всех файлах css, которые были загружены до него. То же самое для переменных и миксинов.

Увидев презентацию Роя Томейджа на Euruko2012, я решил использовать следующий подход, если вам нужно управлять большим количеством CSS.

Обычно я использую такой подход:

1. Переименуйте все существующие файлы .css в .scss
2. Удалите все содержимое из application.scss

Начните добавлять директивы @import в application.scss.

Если вы используете загрузку твиттера и несколько собственных таблиц css, вам необходимо сначала импортировать загрузочную страницу, потому что в ней есть лист для сброса стилей. Итак, вы добавляете @import "bootstrap/bootstrap.scss";в свой application.scss.

Файл bootstrap.scss выглядит так:

// CSS Reset
@import "reset.scss";

// Core
@import "variables.scss";
@import "mixins.scss";

// Grid system and page structure
@import "scaffolding.scss";

// Styled patterns and elements
@import "type.scss";
@import "forms.scss";
@import "tables.scss";
@import "patterns.scss";

И ваш application.scssфайл выглядит так:

@import "bootstrap/bootstrap.scss";

Из-за порядка импорта теперь вы можете использовать переменные, загруженные @import "variables.scss";в любой другой .scssфайл, импортированный после него. Таким образом, их можно использовать type.scssв папке начальной загрузки, а также в my_model.css.scss.

После этого создайте папку с именем partialsили modules. Это будет место для большинства других файлов. Вы можете просто добавить импорт в application.scssфайл, чтобы он выглядел так:

@import "bootstrap/bootstrap.scss";
@import "partials/*";

Теперь, если вы сделаете немного CSS для стилизации статьи на своей домашней странице. Просто создайте, partials/_article.scssи он будет добавлен в скомпилированный application.css. Из-за порядка импорта вы также можете использовать любые примеси и переменные начальной загрузки в своих собственных файлах scss.

Единственный недостаток этого метода, который я обнаружил до сих пор, заключается в том, что иногда вам нужно принудительно перекомпилировать частичные файлы / *. Scss, потому что rails не всегда делают это за вас.

чтобы использовать переменные и тому подобное в файлах, вам необходимо использовать директиву @import. файлы импортируются в указанном порядке.

затем используйте application.css, чтобы запросить файл, объявляющий импорт. это способ добиться желаемого контроля.

наконец, в файле layout.erb вы можете указать, какой "главный" файл css использовать

пример будет более полезным:

допустим, у вас есть два модуля в вашем приложении, которым нужны разные наборы CSS: «application» и «admin»

файлы

|-app/
|-- assets/
|--- stylesheets/
|     // the "master" files that will be called by the layout
|---- application.css
|---- application_admin.css
|
|     // the files that contain styles
|---- config.scss
|---- styles.scss
|---- admin_styles.scss
|
|     // the files that define the imports
|---- app_imports.scss
|---- admin_imports.scss
|
|
|-- views/
|--- layouts/
|---- admin.html.haml
|---- application.html.haml

вот как файлы выглядят внутри:

-------- THE STYLES

-- config.scss
// declare variables and mixins
$font-size: 20px;

--  app_imports.scss
// using imports lets you use variables from `config` in `styles`
@import 'config'
@import 'styles'

-- admin_imports.scss
// for admin module, we import an additional stylesheet
@import 'config'
@import 'styles'
@import 'admin_styles'

-- application.css
// in the master application file, we require the imports
*= require app_imports
*= require some_other_stylesheet_like_a_plugin
*= require_self

-- application_admin.css
// in the master admin file, we require the admin imports
*= require admin_imports
*= require some_other_stylesheet_like_a_plugin
*= require_self


-------- THE LAYOUTS

-- application.html.haml
// in the application layout, we call the master css file
= stylesheet_link_tag "application", media: "all"

--  admin.html.haml
// in the admin layout, we call the admin master css file
= stylesheet_link_tag "application_admin", media: "all"

Создайте следующую структуру папок:

+ assets
|
--+ base
| |
| --+ mixins (with subfolders as noted in your question)
|
--+ styles
  |
  --+ ...

В папке baseсоздайте файл "globals.css.scss". В этом файле объявите весь свой импорт:

@import 'base/colors';
@import 'base/mixins/...';
@import 'base/mixins/...';

В вашем application.css.scss вы должны иметь:

*= require_self
*= depends_on ./base/globals.css.scss
*= require_tree ./styles

И в качестве последнего шага (это важно) объявите @import 'base/globals'в каждом файле стилей, где вы хотите использовать переменные или миксины. Вы можете подумать об этих накладных расходах, но мне действительно нравится идея, что вы должны объявлять зависимости ваших стилей в каждом файле. Конечно, важно, чтобы вы импортировали только миксины и переменные в globals.css.scss, поскольку они не добавляют определения стилей. В противном случае определения стилей будут включены несколько раз в ваш предварительно скомпилированный файл ...

Согласно этому вопросу , вы можете использовать ТОЛЬКОapplication.css.sass для определения переменных импорта и обмена между вашими шаблонами.

=> Кажется, дело только в названии.

Другой способ - включить все и отключить этот конвейер .

У меня была очень похожая проблема. Мне помогло то, что при импорте партиала в оператор @import был подчеркнут символ подчеркивания. Так

@import "_base";

вместо того

@import "base";

Это может быть странная ошибка ...