如何使用Sass变量计算数值？解决nth-child选择器表达式问题

你是不是想通过Sass变量动态控制要隐藏的表格行起始位置，把固定的n+8换成n+(6+$myOffset)？试了三种写法都没生效，确实容易踩这个坑，我来给你捋清楚问题出在哪，以及正确的实现方式。

问题根源 #

你之前的三种写法都没让Sass正确完成数值计算，导致编译后的CSS选择器不符合语法要求：

• try1：table tr:nth-child(n+6+$myOffset) 编译后会变成 table tr:nth-child(n+6+2)，CSS的:nth-child不认识这种连加的表达式，它需要的是一个完整的起始数值（比如n+8）。
• try2：{}不是Sass的插值语法，正确的插值应该用#{}, 所以这个写法本身就有语法错误。
• try3：n+6+#{$myOffset} 和try1的问题一样，编译后是n+6+2，依然是无效的选择器。

正确实现方式 #

有两种简单的方法可以解决这个问题：

方法1：先预计算数值变量

先把6+$myOffset的结果存成一个单独的变量，再用插值插入到选择器里：

$myOffset: 2;
$hideFromRow: 6 + $myOffset; // 先算出8
table tr:nth-child(n+#{$hideFromRow}) {
  display: none;
}

方法2：直接在插值内完成计算

把整个计算表达式放进插值语法里，让Sass先算出结果再生成选择器：

$myOffset: 2;
table tr:nth-child(n+#{$myOffset + 6}) {
  display: none;
}

这两种方法编译后的CSS都会是你想要的：

table tr:nth-child(n+8) {
  display: none;
}

核心就是要让Sass先完成数值运算，得到一个单一的数值，再把这个数值插入到:nth-child的表达式中，这样才能生成合法的CSS选择器。

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