编译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

一个简单的解释可能适合这里的大多数用户：当您只需要编译顶级文件时，您正在编译所有的SassSass通常模块化如下：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->屏幕.cssbase.scss->base.css目录.scss->Directory.css目录文件正在自行编译。因为它没有导入base.scss，所以没有设置变量。scss文件如您所期望的那样生成，因为它正在导入所有必要的信息。您想要做的是重命名您的部分以下划线开始，以防止单独编译它们：屏幕.scss->屏幕.css_base.scss(未编译)-目录.scss(未汇编)