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

Posted 2023-03-06

【中文标题】编译 SCSS 时出现误报“未定义变量”错误

【英文标题】：False positive "undefined variable" error when compiling SCSS

【发布时间】：2013-08-01 07:38:42

【问题描述】：

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

【问题讨论】：

你确定这个错误是正确的吗？我刚刚检查了这个，它工作正常，没有错误

这也是看时的问题，因为它会导致文件自己重新编译。

【参考方案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（未编译）

【讨论】：

谢谢！我一直想知道为什么我看到的这么多示例 scss 文件都有前导下划线，但懒得弄清楚为什么！

谢谢！它帮助我将时间从 2 分钟缩短到 2 秒。非常感谢。我给它+1 :)

大神帮忙，几句话就看懂了编译过程。

从未听说过这件事，直到它发生在我身上

首先谢谢。我有一个后续问题：如果部分说 _abc.scss 取决于上述上下文中的 screen.scss，然后我看到一个错误：未定义变量：“$paragraphFont”，并说我无法控制屏幕怎么办.scss 作为外部库的一部分。我该如何解决这个问题？

【参考方案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));
);

【讨论】：

在您的第一个代码示例中，第一个文件的扩展名是.sass，其他文件的扩展名是.scss。有什么特别的原因吗？

@rinogo 只是一个错字，已修复。

【参考方案3】：

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

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

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

【参考方案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 有不正确的导入语句。

【讨论】：

+1 谢谢！这就说得通了。我实际上并没有意识到它是以错误的顺序创建它们的！但是我很小心地以正确的顺序@import他们，基地排在第一位。但是上面cimanon的回答暂时照顾了我。再次感谢您的帮助！