为什么sass无法使用grunt命令错误进行编译，该错误的索引是2，但列表对于第n个只有1个项目？ [英] Why does sass fail to compile with grunt command error of "index is 2 but list is only 1 item long for `nth'"?
问题描述
在使用Grunt继承一个项目后，我通过终端运行grunt，等待'正在监视...'对scss进行更改，并且终端识别出该更改，但是在下一步指南针中编译失败：dev 。这是它在终端内显示的内容：
等待...
>>文件../sass/inside.scss已更改。
运行compass：dev（指南针）任务
不变../img/common/1x-scb9effd9a6.png
不变../img/common/2x-s7bf9cb0f59 .png
错误/Applications/MAMP/htdocs/Repos/wp-content/themes/quindo/_/sass/inside.scss（/ Applications / MAMP / htdocs / Repos / wp-content / themes / quindo / _ / sass / vendor / retina / _sprite.scss：列表索引为2，但列表只有1个项目为'nth'）
编译在1个文件中失败。
A。所以我查看... vendor / retina / _sprite.scss的第39行，它是以下函数的@if行，并且发现该函数包含$ index：2.将它设置为2的目的是什么？
@mixin retina-sprite（$ name，$ sprite-name：0，$ hover：false，$ active：false）{
$ index：2;
$ len：length（$ retina-sprite-names）;
@ for $ i from $ index $ len {
@if $ sprite-name == nth（$ retina-sprite-names，$ i）{
$ index ：$ i;
}
}
$ sprite：nth（$ retina-sprite-sprites，$ index）;
$ sprite-url：nth（$ retina-sprite-urls，$ index）;
$ sprite2x：nth（$ retina-sprite-sprites2x，$ index）;
$ sprite-url2x：nth（$ retina-sprite-urls2x，$ index）;
@include _retina-sprite（$ name，$ sprite，$ sprite-url，$ sprite2x，$ sprite-url2x，$ hover，$ active）;
}
B。为了让scss变成css，我只是简单地将上述2改为1？我不完全理解该声明的效果。
B2。我测试了将2改为1的理论，并接收有关精灵位置（）的错误必须是精灵图。我应该简单地尝试从开发服务器运行grunt，等待'正在监视'，然后上传已更改的.scss文件，但认为开发人员正在从开发服务器而不是本地运行grunt？
正如已经指出的那样，mixin试图调用仅包含1个元素的列表的第二个元素。这是因为这个mixin（及其相关的mixin）是为较早版本的Sass编写的，其中mixin和函数可以自由访问全局变量。为了解决这个问题，您需要将！global 标志添加到引用全局变量的任何实例中。
这是整个库中的一个问题，它不是与OP提供的mixin分离的。我已经清理了相关的 retina-sprite-add（） mixin，以便您可以看到需要更改的内容并将其转移到其余的mixins中。 / p>
原文：
$ retina-sprite-names：0;
$ retina-sprite-sprites：0;
$ retina-sprite-urls：0;
$ retina-sprite-sprites2x：0;
$ retina-sprite-urls2x：0;
@mixin retina-sprite-add（$ name，$ path，$ path2x）{
$ retina-sprite-spacing：2px！default;
$ sprite：sprite-map（$ path，$ spacing：$ retina-sprite-spacing）;
$ sprite2x：sprite-map（$ path2x，$ spacing：$ retina-sprite-spacing）;
$ retina-sprite-names：append（$ retina-sprite-names，$ name）;
$ retina-sprite-sprites：append（$ retina-sprite-sprites，$ sprite）;
$ retina-sprite-urls：append（$ retina-sprite-urls，sprite-url（$ sprite））;
$ retina-sprite-sprites2x：append（$ retina-sprite-sprites2x，$ sprite2x）;
$ retina-sprite-urls2x：append（$ retina-sprite-urls2x，sprite-url（$ sprite2x））;
}
更新为3.4：
$ retina-sprite-names：0;
$ retina-sprite-sprites：0;
$ retina-sprite-urls：0;
$ retina-sprite-sprites2x：0;
$ retina-sprite-urls2x：0;
@mixin retina-sprite-add（$ name，$ path，$ path2x）{
$ retina-sprite-spacing：2px！default;
$ sprite：sprite-map（$ path，$ spacing：$ retina-sprite-spacing）;
$ sprite2x：sprite-map（$ path2x，$ spacing：$ retina-sprite-spacing）;
$ retina-sprite-names：append（$ retina-sprite-names，$ name）！global;
$ retina-sprite-sprites：append（$ retina-sprite-sprites，$ sprite）！global;
$ retina-sprite-urls：append（$ retina-sprite-urls，sprite-url（$ sprite））！global;
$ retina-sprite-sprites2x：append（$ retina-sprite-sprites2x，$ sprite2x）！global;
$ retina-sprite-urls2x：append（$ retina-sprite-urls2x，sprite-url（$ sprite2x））！global;
}
@include retina-sprite-add（'foo'，'foo.png'，'foox2.png'）;
@include retina-sprite-add（'bar'，'bar.png'，'barx2.png'）;
.foo {
debug：$ retina-sprite-names;
}
现在应输出：
.foo {
debug：0foobar;
}
当然，这也解释了为什么 $ index 变量以第二个索引开始。
After inheriting a project using Grunt, I am running grunt via terminal, waiting for the 'Watching...' make the change to the scss, and terminal recognizes the change but the compilation fails in the next step of compass:dev. Here is what it's showing inside terminal:
Waiting...
>> File "../sass/inside.scss" changed.
Running "compass:dev" (compass) task
unchanged ../img/common/1x-scb9effd9a6.png
unchanged ../img/common/2x-s7bf9cb0f59.png
error /Applications/MAMP/htdocs/Repos/wp-content/themes/quindo/_/sass/inside.scss (Line 39 of /Applications/MAMP/htdocs/Repos/wp-content/themes/quindo/_/sass/vendor/retina/_sprite.scss: List index is 2 but list is only 1 item long for `nth')
Compilation failed in 1 files.
A. So I look at line 39 of ...vendor/retina/_sprite.scss which is the @if line of the following function and found that the function contains $index: 2. What would be the purpose of setting it to 2?
@mixin retina-sprite($name, $sprite-name: 0, $hover: false, $active: false) {
$index: 2;
$len: length($retina-sprite-names);
@for $i from $index through $len {
@if $sprite-name == nth($retina-sprite-names, $i) {
$index: $i;
}
}
$sprite : nth($retina-sprite-sprites, $index);
$sprite-url : nth($retina-sprite-urls, $index);
$sprite2x : nth($retina-sprite-sprites2x, $index);
$sprite-url2x : nth($retina-sprite-urls2x, $index);
@include _retina-sprite($name, $sprite, $sprite-url, $sprite2x, $sprite-url2x, $hover, $active);
}
B. To get the scss to change to css, do I simply change the aforementioned 2 to 1? I don't fully understand the effects of the statement.
B2. I tested this theory of changing 2 to 1, and receive errors about the sprite-position() must be a sprite map. Should I simply attempt to run grunt from the development server, wait for 'watching...' then upload the changed .scss file in the thought that the developer was running grunt from the development server rather than locally?
B3. It seems it was built on: https://github.com/novascreen/Retina-mixins-for-Compass/blob/master/src/retina/_retina-sprite.scss
As already pointed out, the mixin is attempting to call the 2nd element of a list that only has 1 element in it. This is because this mixin (and its related mixins) were written for an older version of Sass where mixins and functions freely had access to global variables. To remedy this, you'll need to add the !global flag to any instance where the global variable is being referenced.
This is an issue throughout the entire library, it isn't isolated to just the mixin provided by the OP. I've cleaned up the related retina-sprite-add() mixin so that you can see what needs to be changed and carry it over to the rest of the mixins.
The Original:
$retina-sprite-names : 0;
$retina-sprite-sprites : 0;
$retina-sprite-urls : 0;
$retina-sprite-sprites2x : 0;
$retina-sprite-urls2x : 0;
@mixin retina-sprite-add($name, $path, $path2x) {
$retina-sprite-spacing: 2px !default;
$sprite : sprite-map($path, $spacing: $retina-sprite-spacing);
$sprite2x : sprite-map($path2x, $spacing: $retina-sprite-spacing);
$retina-sprite-names : append($retina-sprite-names, $name);
$retina-sprite-sprites : append($retina-sprite-sprites, $sprite);
$retina-sprite-urls : append($retina-sprite-urls, sprite-url($sprite));
$retina-sprite-sprites2x : append($retina-sprite-sprites2x, $sprite2x);
$retina-sprite-urls2x : append($retina-sprite-urls2x, sprite-url($sprite2x));
}
Updated for 3.4:
$retina-sprite-names : 0;
$retina-sprite-sprites : 0;
$retina-sprite-urls : 0;
$retina-sprite-sprites2x : 0;
$retina-sprite-urls2x : 0;
@mixin retina-sprite-add($name, $path, $path2x) {
$retina-sprite-spacing: 2px !default;
$sprite : sprite-map($path, $spacing: $retina-sprite-spacing);
$sprite2x : sprite-map($path2x, $spacing: $retina-sprite-spacing);
$retina-sprite-names : append($retina-sprite-names, $name) !global;
$retina-sprite-sprites : append($retina-sprite-sprites, $sprite) !global;
$retina-sprite-urls : append($retina-sprite-urls, sprite-url($sprite)) !global;
$retina-sprite-sprites2x : append($retina-sprite-sprites2x, $sprite2x) !global;
$retina-sprite-urls2x : append($retina-sprite-urls2x, sprite-url($sprite2x)) !global;
}
@include retina-sprite-add('foo', 'foo.png', 'foox2.png');
@include retina-sprite-add('bar', 'bar.png', 'barx2.png');
.foo {
debug: $retina-sprite-names;
}
Should now output:
.foo {
debug: 0 "foo" "bar";
}
Of course, this also explains why the $index variable starts with the 2nd index.
这篇关于为什么sass无法使用grunt命令错误进行编译，该错误的索引是2，但列表对于第n个只有1个项目？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
