Sass 编译SCS时出现假阳性“未定义变量”错误
使用ruby compass gem编译我的SCS时收到错误消息Sass 编译SCS时出现假阳性“未定义变量”错误,sass,Sass,使用ruby compass gem编译我的SCS时收到错误消息 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/generate
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
My screen.scss导入如下部分:
@import "partial/base";
@import "partial/catalog";
在我的基本部分中,我定义了$paragraphFont
在catalog.scss中,我使用它:
.product-view #price-block {
p {
font-weight: normal;
font-family: $paragraphFont;
....
}
}
奇怪的是css编译得很好,$paragraphFont填充正确。因此,我不知道为什么编译器会向我抱怨一个错误。在您的指南针日志中,它指出:
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.scs的导入语句不正确。您正在生成不需要生成的文件 screen.scss->screen.css base.scss->base.css catalog.scss->catalog.css 目录文件正在自行编译。由于未导入base.scss,因此未设置变量。screen.scss文件按预期生成,因为它正在导入所有必要的信息 您要做的是将部分重命名为以下划线开头,以防止它们自行编译: screen.scss->screen.css _base.scss未编译 _catalog.scss未编译
这里有一个可能适合大多数用户的简单解释: 您正在编译所有的sas,而您只需要编译顶级文件 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.scs。自行编译其他文件,例如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目录组织结构。我个人最喜欢的是 它将常用元素拆分为其他文件,这些文件都由main.scs导入以消除冗余
但是,首先要注意@cimmanon的回答,因为他更直接地回答了您的问题。您确定这个错误是正确的吗?我刚刚检查了这个,它工作正常,没有错误。这在观看时也是一个问题,因为它会导致文件自行重新编译。谢谢!我一直想知道为什么我看到这么多示例scss文件都有前导下划线,但我太懒了,不知道为什么!非常感谢。它帮我节省了很多时间,从2分钟到2秒。谢谢。我给它+1:上帝保佑,你让我用几句话就理解了编译过程。我从来没有听说过这件事,直到它首先发生在美赞克身上。我有一个后续问题:如果部分say_abc.scss在上述上下文中依赖于screen.scss,然后我看到一个错误:未定义变量:$paragraphFont,并说我没有screen.scss作为外部库的一部分的控制权,该怎么办。我怎样才能解决这个问题?+1谢谢!这是有道理的。事实上,我没有意识到它是以错误的顺序创建它们的!但我很小心地以正确的顺序“导入”,以基地为先。但上面西曼农的回答暂时照顾了我。再次感谢你的帮助!在第一个代码示例中,第一个文件的扩展名是.sass,其他文件的扩展名是.scss。有什么特别的原因吗?@rinogo只是一个拼写错误,已修复。
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));
});