Ложноположительная ошибка undefined variable при компиляции SCSS

Получение сообщения об ошибке при компиляции моего SCSS с использованием рубинового компаса.

run: /var/lib/gems/1.8/gems/compass-0.12.2/bin/compass compile
out: unchanged sass/partial/grid.scss
out:     error sass/partial/catalog.scss (Line 5: Undefined variable: "$paragraphFont".)
out:    create css/generated/partial/catalog.css 
out:    create css/generated/partial/base.css 
out: overwrite css/generated/screen.css

My screen.scss импортирует частичные файлы следующим образом:

@import "partial/base";
@import "partial/catalog";

В моем base частичном я определил $paragraphFont.

$paragraphFont: 'Lucida Sans', arial;
$regularFontSize: 14px;

И в catalog.scss я использую его:

.product-view #price-block {
    p {
        font-weight: normal;
        font-family: $paragraphFont;
        ....
    }
}

Странно, что css компилируется просто отлично, а $paragraphFont заполняется правильно. Поэтому я не знаю, почему компилятор жалуется на меня об ошибке.

Ответы

Ответ 1

Вы создаете файлы, которые не нужно создавать.

  • screen.scss → screen.css
  • base.scss → base.css
  • catalog.scss → catalog.css

Файл каталога компилируется сам по себе. Поскольку он не импортирует base.scss, переменные не заданы. Ваш файл screen.scss генерируется так, как вы ожидаете, потому что он импортирует всю необходимую информацию.

То, что вы хотите сделать, - переименовать частичные, чтобы начать с подчеркивания, чтобы они не были скомпилированы самостоятельно:

  • screen.scss → screen.css
  • _base.scss(не скомпилирован)
  • _catalog.scss(не скомпилирован)

Ответ 2

Более простое объяснение, которое, вероятно, подходит для большинства пользователей здесь:

Вы компилируете весь свой sass, когда вам нужно всего лишь собрать файл верхнего уровня

sass обычно модулируется следующим образом:

toplevel.scss
  include child1.scss
  include child2.scss (that also uses variables from child1.sass but does not import child1.scss)
  include child3.scss (that also uses variables from child1.sass but does not import child1.sass)

При компиляции вам нужно только скомпилировать toplevel.scss. Компиляция других файлов сама по себе (например, child2.scss) приведет к возникновению ошибок в переменных undefined.

В вашем gulpfile:

gulp.task('sass', function () {
  gulp
    .src('./static/scss/toplevel.scss') // NOT *.scss
    .pipe(sass())
    // Rest is just decoration
    .pipe(prefixer('last 2 versions', 'ie 9'))
    .pipe(gulp.dest('./static/css/dist'))
    .pipe(livereload(livereloadServer));
});

Ответ 3

В вашем журнале компаса указано:

A)  create css/generated/partial/catalog.css 
B)  create css/generated/partial/base.css

Они должны быть:

A)  create css/generated/partial/base.css
B)  create css/generated/partial/catalog.css

Я предполагаю, что ваш screen.scss имеет неверные инструкции импорта.

Ответ 4

Я бы рекомендовал заглянуть в общие организационные структуры каталога Sass. Мой личный фаворит Шаблон 7-1.

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

Но также, во-первых, обратите внимание на ответ @cimmanon, поскольку он более непосредственно обращается к вашему вопросу.