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

使用ruby compass gem编译我的SCS时收到错误消息

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";

在我的基本部分中，我定义了$paragraphFont

在catalog.scss中，我使用它：

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

---

奇怪的是css编译得很好，$paragraphFont填充正确。因此，我不知道为什么编译器会向我抱怨一个错误。

在您的指南针日志中，它指出：

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.scs的导入语句不正确。

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

screen.scss->screen.css base.scss->base.css catalog.scss->catalog.css 目录文件正在自行编译。由于未导入base.scss，因此未设置变量。screen.scss文件按预期生成，因为它正在导入所有必要的信息

您要做的是将部分重命名为以下划线开头，以防止它们自行编译：

screen.scss->screen.css _base.scss未编译 _catalog.scss未编译

---

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

您正在编译所有的sas，而您只需要编译顶级文件

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.scs。自行编译其他文件，例如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));
});

---

我建议研究常见的Sass目录组织结构。我个人最喜欢的是

它将常用元素拆分为其他文件，这些文件都由main.scs导入以消除冗余

---

但是，首先要注意@cimmanon的回答，因为他更直接地回答了您的问题。

您确定这个错误是正确的吗？我刚刚检查了这个，它工作正常，没有错误。这在观看时也是一个问题，因为它会导致文件自行重新编译。谢谢！我一直想知道为什么我看到这么多示例scss文件都有前导下划线，但我太懒了，不知道为什么！非常感谢。它帮我节省了很多时间，从2分钟到2秒。谢谢。我给它+1：上帝保佑，你让我用几句话就理解了编译过程。我从来没有听说过这件事，直到它首先发生在美赞克身上。我有一个后续问题：如果部分say_abc.scss在上述上下文中依赖于screen.scss，然后我看到一个错误：未定义变量：$paragraphFont，并说我没有screen.scss作为外部库的一部分的控制权，该怎么办。我怎样才能解决这个问题？+1谢谢！这是有道理的。事实上，我没有意识到它是以错误的顺序创建它们的！但我很小心地以正确的顺序“导入”，以基地为先。但上面西曼农的回答暂时照顾了我。再次感谢你的帮助！在第一个代码示例中，第一个文件的扩展名是.sass，其他文件的扩展名是.scss。有什么特别的原因吗？@rinogo只是一个拼写错误，已修复。

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