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

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

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

мой 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 заполнен правильно. Так что я не знаю, почему компилятор жалуется мне на ошибку.

Источник

4 ответа

Решение

Вы генерируете файлы, которые не нужно генерировать.

  • screen.scss -> screen.css
  • base.scss -> base.css
  • catalog.scss -> catalog.css

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

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

  • screen.scss -> screen.css
  • _base.scss (не скомпилировано)
  • _catalog.scss (не скомпилировано)
Источник

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

Вы компилируете весь свой 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) приведет к ошибкам относительно неопределенных переменных.

В вашем 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));
});
Источник

В вашем журнале компаса говорится:

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 содержит неверные операторы импорта.

Источник

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

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

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

Источник
Другие вопросы по тегам