Глобальные переменные SASS не передаются частичным

По сути, у меня есть структура, которая отлично работала в 3.0.x, а теперь ломается с undefined variable ошибками.

  • partials
    • _base.css.sass
    • _header.css.sass
  • main.css.sass
  • приложение.css.sass

application.css.sass:

//=require 'main'

main.css.sass:

@import 'partials/base'
@import 'partials/header'

Довольно простые вещи.

Я получаю сообщение об ошибке на _header.css.sass, потому что он использует переменную, определенную на _base.css.sass

Раньше у меня не было этой ошибки, и для меня это не имеет смысла, поскольку мы импортируем эти переменные в _base.css.sass в том же контексте, что и _header.css.sass.

Придется ли мне также импортировать _base.css.sass для каждого фрагмента? Какой смысл в main.css.sass требующих глобальных переменных, если они не могут использоваться в собственных частях, которые вам нужны?

Если моя структура совершенно неверна, пожалуйста, дайте мне альтернативу, я буду рад предложениям.


assets sass ruby-on-rails-3
person Draiken    schedule 07.06.2011    source источник
comment
config.assets.precompile — ваш друг :-) [Просто взгляните сюда, что мне действительно помогло!!!] [1] [1]: stackoverflow.com/questions/7134034/   -  person    schedule 13.09.2011

Ответы (5)


arrow_upward
26
arrow_downward

Вы не можете использовать //=require для включения «динамических» элементов SASS, таких как примеси и переменные, потому что он используется только для включения наиболее «статичных» элементов (например, чистого CSS). Вы должны @import все свои файлы в application.css.sass. Railscasts дает хорошее объяснение этого в эпизоде ​​#268.

person muhal    schedule 29.01.2012

arrow_upward
2
arrow_downward

Есть простое решение для оригинальной темы. Ваше приложение и основные файлы css должны быть файлами scss. Это означает, что вы можете использовать известный синтаксис:

/*
 *= require_self
 *= require main
 */

В main.scss вы можете импортировать партиалы следующим образом:

@import 'partials/base'
@import 'partials/header'

Эти файлы являются файлами sass, и вы можете извлечь выгоду из величия SASS ;-)

person awenkhh    schedule 24.08.2012

arrow_upward
2
arrow_downward

Думаю, у меня была та же проблема, и помогло объявление переменных перед @imports. Надеюсь, это кому-то поможет =).

person Joonas Ahola    schedule 13.10.2012

arrow_upward
1
arrow_downward

Очевидно, вы ДОЛЖНЫ использовать application.css.sass в качестве манифеста, иначе ничего не сработает.

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

Немного слишком принудительно, если вы спросите меня...

person Draiken    schedule 17.06.2011
comment
Не могли бы вы уточнить, что вы имеете в виду, говоря, что вы должны использовать … в качестве манифеста? Я использую application.css.sass в качестве основного файла, а @import все остальные файлы, но все равно сталкиваюсь с той же проблемой, что и описанная выше. - person Marc; 23.01.2012
comment
Вы используете .sass, где имя файла .scss - person raulriera; 23.01.2012
comment
Спасибо, это была опечатка @raulriera - person Draiken; 23.01.2012
comment
Ну, это сработало для меня несколько раз. Для того, чтобы объявленные переменные и миксины работали в одном файле, вы должны импортировать их с помощью sass, а не с помощью sprockets. @Марк - person Draiken; 23.01.2012
comment
Я использую операторы импорта sass, но переменные недоступны в других файлах во время предварительной компиляции (с использованием Heroku). Я временно «исправил» проблему, импортировав файл sass с переменными в каждый второй файл sass, но это далеко не идеальное решение. - person Marc; 24.01.2012
comment
@ Марк Я должен думать, что это проблема с героку. Работает ли это в вашей среде разработки? Никогда не было никаких проблем после того, как я полностью перешел на импорт sass. - person Draiken; 26.01.2012

arrow_upward
0
arrow_downward

Это sass-файл. Используйте @import в application.css.sass вместо require. require предназначен для простых движков css или шаблонов, у которых нет системы импорта.

person chriseppstein    schedule 21.06.2011