Question

使用ruby指南针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 - ＆gt; screen.css
base.scss - ＆gt; base.css
catalog.scss - ＆gt; catalog.css

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

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

screen.scss - ＆gt; 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导入语句不正确。

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

4 个答案: