编译SCSS时误报为“未定义variables”错误
使用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填充正确。 所以我不知道为什么编译器抱怨我有关错误。
您正在生成不需要生成的文件。
- screen.scss – > screen.css
- base.scss – > base.css
- catalog.scss – > catalog.css
目录文件正在自行编译。 由于不是导入base.scss，因此未设置variables。 您的screen.scss文件会按照您的预期生成，因为它正在导入所有必要的信息。
你想要做的就是重新命名你的partials ，以下划线开始，以防止它们自己编译：
- screen.scss – > screen.css
- _base.scss（未编译）
- _catalog.scss（未编译）
一个简单的解释可能适合大多数用户在这里：
当你只需要编译顶层文件时，你正在编译所有的文件
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）会产生关于未定义variables的错误。
在你的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)); });
在您的指南针日志中指出：
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有不正确的导入语句。
我build议寻find常见的Sass目录组织结构。 我个人最喜欢的是7-1模式 。
它的本质是将常用的元素拆分成其他文件，这些文件都是由一个main.scss导入的，以消除冗余。
而且，首先要注意@ cimmanon的回答，因为他更直接地回答你的问题。
