编译 SCSS 时出现误报“未定义变量”错误

Question

使用 ruby​​ compass gem 编译我的 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

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

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

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

您想要做的是将您的 partials 重命名为以下划线开头，以防止它们被自己编译：

• screen.scss -> screen.css
• _base.scss（未编译）
• _catalog.scss（未编译）

Answer 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）会产生关于未定义变量的错误。

在你的 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));
});

Answer 3

我建议查看常见的 Sass 目录组织结构。我个人最喜欢的是The 7-1 Pattern。

它的本质是将常用元素拆分成其他文件，这些文件都通过main.scss 导入以消除冗余。

另外，首先要注意@cimmanon 的回答，因为他更直接地回答了你的问题。

Answer 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 

我的猜测是你的 screen.scss 有不正确的导入语句。