css - 第 n 个子选择器的 SASS 编译错误

Question

所以我在这里做了一些研究，但无法找到答案，所以希望这里有人可以帮助我......

我有以下 SASS 代码

$column: 7;

table
{
  th:nth-child($column) 
  {
    // This does NOT compile
  } 
  th:nth-child(7) 
  {
    // This does compile
  }
}

为什么将 nth-child 选择器与变量结合使用不会在 SASS 中编译？是否有任何替代方法可以将动态值与 nth-child 选择器一起使用？

Answer 1

与选择器一起使用时必须对变量进行插值（例如，作为功能性伪类的参数）。在您的情况下，语法应如下所示：

$column: 7;

table
{
  th:nth-child(#{$column})
  {
    // ...
  }
}