69

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

4

4 回答 4

181

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

  • 屏幕.scss -> 屏幕.css
  • base.scss -> base.css
  • 目录.scss -> 目录.css

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

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

  • 屏幕.scss -> 屏幕.css
  • _base.scss（未编译）
  • _catalog.scss（未编译）
于 2013-07-31T17:23:41.663 回答
16

一个更简单的解释，可能适合这里的大多数用户：

当您只需要编译顶级文件时，您正在编译所有 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));
});
于 2014-08-27T09:30:25.887 回答
5

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

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

而且，首先要注意@cimmanon 的回答，因为他更直接地解决了您的问题。

于 2016-11-15T18:58:24.020 回答
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 有不正确的导入语句。

于 2013-07-31T17:16:36.010 回答