Question

我在使用SASS为我正在处理的独特项目创建一个小型CSS框架时遇到了一个奇怪的问题。

在不涉及不必要的细节的情况下，我使用z-index循环创建了一系列10个@for类。从第一个索引开始，每个z-index值应为10的倍数。

/* Loop from 1 to 10, creating 10 z-index classes */
@for $i from 1 to 10 {
    .z#{$i} { z-index: ($i * 10) }
}

/* This SHOULD output... */
.z1 { z-index: 10 }
.z2 { z-index: 20 }
.z3 { z-index: 30 }
.z4 { z-index: 40 }
.z5 { z-index: 50 }
.z6 { z-index: 60 }
.z7 { z-index: 70 }
.z8 { z-index: 80 }
.z9 { z-index: 90 }
.z10 { z-index: 100 }

问题：它没有输出我期待的值。相反，我得到1, 2, 3, etc的值，我应该获得10, 20, 30, etc的值。

如何使其失败 我可以将两个无单位值相乘，并得到line-height所期望的结果。但如果我为z-index这样做，我会得到奇怪的结果。以下是我如何使其失败的一些其他示例。我列出了font-size和line-height的值，它们的结果与我期望的一样。

.example-1 {
    font-size: (16px * 1.5); // outputs 24px
    line-height: (1 * 1.5);  // outputs 1.5
    z-index: (10 * 10);      // should output 100, but it outputs 5
}

.example-2 {
    z-index: (10 * 10);      // outputs 5 (wrong)
    z-index: (10 / 10);      // outputs 1
    z-index: (10 + 10);      // outputs 2 (wrong)
    z-index: (10 - 10);      // outputs 0
}

我感到疯狂。还有其他人遇到过这个问题吗？

编辑：已解决的问题。

显然，gulp-cssnano插件会将CSS缩小为构建过程的一部分，导致这种情况发生。默认情况下，gulp-cssnano会重新设定您的z-index值，这对于其他任何人来说都不是很酷，也可能不是很酷。无论如何，通过将{ zindex: false }选项传递给gulp-cssnano的调用，可以很好地解决这个问题。

.pipe( cssnano({ zindex: false }) );

Answer 1

通过其中一项优化检查gulp-cssnano是否导致问题。

我可以看到cssnano对z-index进行了优化，并标记为“不安全。”您可以禁用各种优化或使用gulp中的选项对象进行配置。尝试以下几点：

.pipe( 
    nano( {
        zindex: false
    } )
)

在SASS

1 个答案: