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

получение сообщения об ошибке при компиляции моего SCSS с помощью ruby compass gem.

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 55
sass

4 ответа:

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

  • экран.СКС -> экране.css
  • базы.СКС -> база.css
  • - каталог.СКС -> каталог.css

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

Что вы хотите сделать, это переименовать partials чтобы начать с подчеркивания, чтобы предотвратить их компиляцию самостоятельно:

  • экран.СКС -> экране.css
  • _base.СКС (не компилируется)
  • _catalog.СКС (не компилируется)
145

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

вы компилируете все ваши 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)

при компиляции вам нужно только скомпилировать верхний уровень.СКС. Компиляция других файлов самостоятельно (например, 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));
});
11

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

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

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

4

в журнале "компас", в которой говорится:

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

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

3