Sass gulp crashes - SCSS Error : Illegal nesting: Only properties maybe nested beneath properties
Sass gulp crashes - SCSS Error : Illegal nesting: Only properties maybe nested beneath properties
Gulp-sass 由于错误而崩溃 - 因为一开始它崩溃了我什至没有收到错误,然后我 运行 sass 通过 ruby 编译器,我得到了以下内容。
error neat/grid/_media.scss(第 34 行:非法嵌套:只有属性可以嵌套在属性下面)
我看不出 _media.scss 有什么问题,因此我不知道错误消息指的是什么。
我在 Whosebug 上看到了有关 Sass 代码中此错误消息的含义的答案,但我看不出此消息如何应用于 Scss 代码,因为缩进在 Scss 中不是问题。
这是错误消息中提到的 neat/grid/_media.scss 的 link。
https://github.com/thoughtbot/neat/blob/master/app/assets/stylesheets/grid/_media.scss
这是 mixin 的文档。
http://thoughtbot.github.io/neat-docs/latest/#media
这是错误消息中提到的文件中的实际代码:
@mixin media($query: $feature $value $columns, $total-columns: $grid- columns) {
@if length($query) == 1 {
@media screen and ($default-feature: nth($query, 1)) {
$default-grid-columns: $grid-columns;
$grid-columns: $total-columns !global;
@content;
$grid-columns: $default-grid-columns !global;
}
} @else {
$loop-to: length($query);
$media-query: "screen and ";
$default-grid-columns: $grid-columns;
$grid-columns: $total-columns !global;
@if is-not(is-even(length($query))) {
$grid-columns: nth($query, $loop-to) !global;
$loop-to: $loop-to - 1;
}
$i: 1;
@while $i <= $loop-to {
$media-query: $media-query + "(" + nth($query, $i) + ": " + nth($query, $i + 1) + ") ";
@if ($i + 1) != $loop-to {
$media-query: $media-query + "and ";
}
$i: $i + 2;
}
@media #{$media-query} {
@content;
$grid-columns: $default-grid-columns !global;
}
}
}
有谁知道错误消息对 SCSS 意味着什么(不是 Sass)?它说 _media.scss 中存在嵌套(缩进)错误,但 SCSS 不关心缩进!
我希望能为别人节省很多时间的教训是:
- 当 sass-gulp 崩溃时,很可能是 sass/scss 错误而不是 gulp 错误 。我不知道这一点,因为大多数语法错误都会通过 gulp 文件中的错误处理传送到控制台,但事实证明,如果你的错误稍微严重一点,它仍然会崩溃 gulp。
- 当您从 scss 或 sass 文件中收到错误消息时,错误实际上可能不在该文件中。 我最终随机禁用了所有文件以最终找到有问题的文件,因为错误消息给出了错误的文件名。
我在 sass-gulp 再次开始工作后发现了这一点,当时我在 _media.scss 中注释掉了第 10 行和第 37 行,它们是 '@content ' 指令,即使没有这些行甚至 _media.scss 文件中实际上没有任何错误:
什么是@content 指令?
这些指令从其他 sass 文件调用我的代码。这是我自己的其他文件,当它们被@content
调用时,它们破坏了 mixin 并使 gulp 崩溃
如果您查看有问题的文件中的 .find-drawer class,您会发现所有媒体查询都嵌套在 margin-bottom: -33px 规则中
.find-drawer
margin-bottom: -33px
@include media(max-width $tablet-size)
margin-bottom: 0
@include media(max-width $small-screen)
margin-bottom: 0
@include media(max-width $mobile-screen)
margin-bottom: 0
这一定产生了一个非常疯狂的媒体查询,因为它在 _media.scss
中被送入循环
我只是将媒体查询向左移动了几个空格,以便它们现在嵌套在 .find-drawer class
中
.find-drawer
margin-bottom: -33px
@include media(max-width $tablet-size)
margin-bottom: 0
@include media(max-width $small-screen)
margin-bottom: 0
@include media(max-width $mobile-screen)
margin-bottom: 0
呸!真松了一口气!
Gulp-sass 由于错误而崩溃 - 因为一开始它崩溃了我什至没有收到错误,然后我 运行 sass 通过 ruby 编译器,我得到了以下内容。
error neat/grid/_media.scss(第 34 行:非法嵌套:只有属性可以嵌套在属性下面)
我看不出 _media.scss 有什么问题,因此我不知道错误消息指的是什么。
我在 Whosebug 上看到了有关 Sass 代码中此错误消息的含义的答案,但我看不出此消息如何应用于 Scss 代码,因为缩进在 Scss 中不是问题。
这是错误消息中提到的 neat/grid/_media.scss 的 link。
https://github.com/thoughtbot/neat/blob/master/app/assets/stylesheets/grid/_media.scss
这是 mixin 的文档。 http://thoughtbot.github.io/neat-docs/latest/#media
这是错误消息中提到的文件中的实际代码:
@mixin media($query: $feature $value $columns, $total-columns: $grid- columns) {
@if length($query) == 1 {
@media screen and ($default-feature: nth($query, 1)) {
$default-grid-columns: $grid-columns;
$grid-columns: $total-columns !global;
@content;
$grid-columns: $default-grid-columns !global;
}
} @else {
$loop-to: length($query);
$media-query: "screen and ";
$default-grid-columns: $grid-columns;
$grid-columns: $total-columns !global;
@if is-not(is-even(length($query))) {
$grid-columns: nth($query, $loop-to) !global;
$loop-to: $loop-to - 1;
}
$i: 1;
@while $i <= $loop-to {
$media-query: $media-query + "(" + nth($query, $i) + ": " + nth($query, $i + 1) + ") ";
@if ($i + 1) != $loop-to {
$media-query: $media-query + "and ";
}
$i: $i + 2;
}
@media #{$media-query} {
@content;
$grid-columns: $default-grid-columns !global;
}
}
}
有谁知道错误消息对 SCSS 意味着什么(不是 Sass)?它说 _media.scss 中存在嵌套(缩进)错误,但 SCSS 不关心缩进!
我希望能为别人节省很多时间的教训是:
- 当 sass-gulp 崩溃时,很可能是 sass/scss 错误而不是 gulp 错误 。我不知道这一点,因为大多数语法错误都会通过 gulp 文件中的错误处理传送到控制台,但事实证明,如果你的错误稍微严重一点,它仍然会崩溃 gulp。
- 当您从 scss 或 sass 文件中收到错误消息时,错误实际上可能不在该文件中。 我最终随机禁用了所有文件以最终找到有问题的文件,因为错误消息给出了错误的文件名。
我在 sass-gulp 再次开始工作后发现了这一点,当时我在 _media.scss 中注释掉了第 10 行和第 37 行,它们是 '@content ' 指令,即使没有这些行甚至 _media.scss 文件中实际上没有任何错误:
什么是@content 指令?
这些指令从其他 sass 文件调用我的代码。这是我自己的其他文件,当它们被@content
调用时,它们破坏了 mixin 并使 gulp 崩溃如果您查看有问题的文件中的 .find-drawer class,您会发现所有媒体查询都嵌套在 margin-bottom: -33px 规则中
.find-drawer
margin-bottom: -33px
@include media(max-width $tablet-size)
margin-bottom: 0
@include media(max-width $small-screen)
margin-bottom: 0
@include media(max-width $mobile-screen)
margin-bottom: 0
这一定产生了一个非常疯狂的媒体查询,因为它在 _media.scss
中被送入循环我只是将媒体查询向左移动了几个空格,以便它们现在嵌套在 .find-drawer class
中.find-drawer
margin-bottom: -33px
@include media(max-width $tablet-size)
margin-bottom: 0
@include media(max-width $small-screen)
margin-bottom: 0
@include media(max-width $mobile-screen)
margin-bottom: 0
呸!真松了一口气!