css - 当函数被注释掉时，SCSS 不会编译 - CompileSass

Question

不幸的是，我不得不重新检查我的 CSS 并重新编写一些样式以确保它适用于 IE8(客户需要它)。我有一个向元素添加 z-index 的函数，

.mobile-pane {
    ....
    ....

    /* won't work for IE8 */
    /* @for $i from 1 through 4 {
        &:nth-child(#{$i}) {
            z-index: #{$i};
        }
    } */

    &:first-child {
        z-index: 1;

        & + .mobile-pane {
            z-index: 2;

            & + .mobile-pane {
                z-index: 3;

                & + .mobile-pane {
                    z-index: 4;
                }
            }
        }
    }
}

如您所见，函数被清楚地注释掉了。但是(我在 Visual Studio 中使用 CompileSASS)，在输出窗口中，我看到了这个:

CompileSass 8:35:55 AM:Sass compilation failed for main. 
Error: C:/projectFolder/source/sass/components/header:219: unbound variable $i

在 Google WebDev 中，我看到了函数的输出，....:nth-child(2) { z-index:2; ...等等，不是

.mobile-pane:first-child+.mobile-pane {
    z-index: 2;
}

，如我所料。我是 SCSS 的新手，所以我不知道这是否是一个已知问题，或者是否 CompileSass没有正确阅读评论。

我明白我可以保留这个功能，只要在它下面有 IE8 z-index CSS，它仍然可以工作，但我想保留这个功能，以防将来 IE8 不再是必需的.

我的问题 - SCSS 这样做是正常的，还是扩展？

Answer 1

在 CSS 注释中访问变量是正常的，在注释中声明变量不是。

$i: 100;

/* commenting about #{$i} */

输出:

/* commenting about 100 */

同时:

/*
$j: 100;

commenting about #{$j} */

引发错误:

Undefined variable: "$j".

如果您想注释掉访问因被注释掉而不存在的变量的代码块，请改用双斜杠:

$j: 100;

.foo {
// content: $j;
}