如何在nth-child（）里面使用scss变量

在Sass中，可以使用插值语法将SCSS变量嵌入到nth-child()选择器中。例如，假设有一个SCSS变量$index，你可以在nth-child()选择器中使用#{$index}来引用这个变量。下面是一个示例：

$index: 4;

ul {
  li {
    &:nth-child(#{$index}) {
      background-color: yellow;
    }
  }
}

在上面的示例中，我们将SCSS变量$index的值设置为4，并在nth-child()选择器中使用#{$index}来引用这个变量。这将生成CSS代码，选择第4个li元素，并将其背景颜色设置为黄色。

请注意，插值语法#{}只能在属性值中使用，不能在选择器中使用。因此，我们需要将nth-child()选择器放在&符号之后，以确保它是嵌套在正确的选择器中的。

希望这个回答对你有帮助！\[1\]
#### 引用[.reference_title]
- *1* *2* *3* [CSS 笔记（十三）：预处理器 —— Sass](https://blog.csdn.net/Raymiles/article/details/126691089)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]