如何在选择器中使用变量？

Question

在某些情况下，我遇到了一个问题，即变量设置不正确。

@index: 10;
[data-grid*='cols-@{index}'] > * {
    background: red;
}

我使用值为 10 的变量 index。我希望将 @{index} 替换为 10，但事实并非如此。结果是[data-grid*='cols-@{index}']，我没有收到任何错误。

也许我需要以某种方式逃避它？

Answer 1

您有点回答了自己的问题：您应该将整个选择器视为一个字符串。这似乎有效：

@index: 10;
(~"[data-grid*='cols-@{index}'] > *")
{
    background: green;
}