编译SCSS时出现假阳性“未定义变量”错误

Question

编译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我的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正确填充。所以我不知道为什么编译器会抱怨我出错了。

Answer 1

一个简单的解释可能适合这里的大多数用户：

当您只需要编译顶级文件时，您正在编译所有的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。单独编译其他文件(例如，child 2.scss)将生成有关未定义变量的错误。

在你的狼吞虎咽的文件里：

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));
});

Answer 2

我建议查看常见的Sass目录组织结构。

它的性质将常用的元素拆分到其他文件中，这些文件都是由main.scss杀死多余的人。

Answer 3

您正在生成不需要生成的文件。

• 屏幕.scss->屏幕.css
• base.scss->base.css
• 目录.scss->Directory.css

目录文件正在自行编译。因为它没有导入base.scss，所以没有设置变量。scss文件如您所期望的那样生成，因为它正在导入所有必要的信息。

您想要做的是重命名您的部分以下划线开始，以防止单独编译它们：

• 屏幕.scss->屏幕.css
• _base.scss(未编译)
• -目录.scss(未汇编)