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

使用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可以正确填充。所以我不知道为什么编译器向我抱怨一个错误。

番长Itachi2020/03/18 18:22:53

我建议您研究常见的Sass目录组织结构。我个人最喜欢的是7-1模式

它的性质将常用元素拆分为其他文件,所有文件均由a导入main.scss以消除冗余。

但同时,首先要注意@cimmanon的答案,因为他会更直接地解决您的问题。

TonyItachi2020/03/18 18:22:53

在您的指南针日志中指出:

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

前端Stafan阿飞2020/03/18 18:22:53

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

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

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

您要做的是重命名部分,以下划线开头,以防止它们自己编译:

  • screen.scss-> screen.css
  • _base.scss(未编译)
  • _catalog.scss(未编译)