Sass中如何将calc计算结果输出到content属性？

嘿，我明白你遇到的问题了——你想用Sass的循环计算数值，然后把结果放到content里，但现在输出的是calc($i * 10)这个表达式，而不是你想要的10、20这些具体数字。

问题根源 #

你用了CSS的calc()函数，Sass会把它当作原生CSS语法保留，不会主动解析计算里面的表达式。也就是说，Sass把calc($i * 10)当成了一个字符串直接输出给浏览器，而不是先计算出结果再输出。另外你原来的代码还有个小问题：所有.list-el的:before样式会被最后一次循环覆盖，最终只会显示80，没法得到10到80的序列。

解决方案 #

既然你只是做纯数值的乘法运算（没有混合不同单位的需求），完全不需要用calc()，直接让Sass原生计算即可。同时用:nth-child()来给每个列表项单独设置样式，避免样式覆盖。

修改后的代码如下：

@for $i from 1 through 8 {
  .list-el:nth-child(#{$i}) {
    $test: $i * 10; // 直接用Sass完成数值计算
    &:before {
      content: '#{$test}'; // 用插值把计算后的数值插入到content中
    }
  }
}

编译后的CSS会是：

.list-el:nth-child(1):before {
  content: "10";
}
.list-el:nth-child(2):before {
  content: "20";
}
/* ... 以此类推到nth-child(8) */

额外补充：如果确实需要用CSS calc的情况 #

如果你有混合单位的计算需求（比如px和vw结合），可以让Sass先计算固定数值部分，再把结果传入calc()：

@for $i from 1 through 8 {
  .list-el:nth-child(#{$i}) {
    $base: $i * 10;
    &:before {
      content: calc(#{$base}% + 5px); // Sass先计算$base，再把结果放到calc里
    }
  }
}

这样就能得到你想要的每个列表项对应不同计算结果的效果啦～

内容的提问来源于stack exchange，提问作者panthro