在 SASS 中乘以无单位值时出现意外结果

Question

我在使用 SASS 为我正在进行的一个独特项目创建一个小型 CSS 框架时偶然发现了一个奇怪的问题。

无需赘述，我将使用 @for 循环创建一系列 10 个 z-index 类。从第一个索引开始，每个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
    } )
)