рельсы 4 и компас, как импортировать только один раз мои файлы sass?

У меня есть проект Rail 4 с "таблицами стилей / application / index.css.scss" со всеми моими файлами css:

 /*
 *= require jquery.ui.all
 *= require_tree ../shared
 *= require_tree ../design
 *= require_tree ../layout
 *= require_self
 *= require_tree .
 */

rails компилирует все css в один, свернутый (в prod).

Мне нужно импортировать @import "shared/header" во многие файлы.

пример: в "stylesheets / layout / main.css.scss"

@import 'shared/header';

.header
{
  @extend .header_common_overview;
  [...]
}

но я @import 'shared/header' и в других файлах тоже. Результат:

когда рельсы компилируются только в один файл, много раз используются одни и те же правила ".header_common_overview", потому что я импортирую его в разные файлы.

Я попытался поместить инструкцию "импорт" прямо в index.css.scss, но она не работает.

Итак, как я могу импортировать файл только один раз и иметь возможность вызывать содержимое во всех других файлах?


css sass ruby-on-rails-4 compass compass-sass
person Matrix    schedule 17.11.2014    source источник

Ответы (2)


arrow_upward
1
arrow_downward

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

Я научился избегать require строк звездочек в основных файлах SASS по причинам, аналогичным тем, которые вы описываете.

  • Это может привести к дублированию, особенно при использовании =require_tree повсюду
  • Переменные / миксины / и т. Д. Не могут быть включены через звездочки (хотя я бы хотел, чтобы меня доказали, что я ошибаюсь)

В вашем index.css.scss вы можете подумать о том, чтобы просто поставить

@import "vendor";
@import "shared";
@import "design";
@import "layout";

// Your main styling here.

@import "another_file";

Эти @import строки соответствуют другим файлам sass. shared.css.scss, например, может выглядеть так

/*
 *=require ./shared/header
 */

Идея состоит в том, чтобы

  1. Сохраняйте чистое разделение / организацию вашего актива, включая
  2. Явно определите включение каждого актива, чтобы сохранить полный контроль над порядком включения.
  3. Используйте SASS @import вместо директивы Sprockets =require, чтобы переменные, миксины и т. Д. Присутствовали во включенном файле и были доступны повсюду.
person deefour    schedule 17.11.2014
comment
включать один за другим мой файл css - действительно скучный способ. Мы не можем @импортировать папку? У меня 20 файлов css, мне нужно поставить 20 @import? - person Matrix; 17.11.2014
comment
Проверьте руководство и этот ответ SO, который описывает то же ограничение с одновременным импортом каталога, которое я описал для Sprockets выше. - person deefour; 17.11.2014

arrow_upward
0
arrow_downward

Мое решение: создать all.css.scss с помощью:

/*
 *= require jquery.ui.all => static, don't need import
 */
@import 'included/**/*'; //all files included (at first time)
@import 'all/**/*'; //all real css files which requires included file (in second times)

Порядок соблюдается и контролируется.

Включенные файлы присутствуют только один раз

включенные файлы являются общими для всех реальных файлов css.

спасибо за помощь.

person Matrix    schedule 17.11.2014