在 SCSS 中使用 CSS 选择器变量
在 SCSS 中，变量是存储动态值并在整个样式表中重用它们的强大工具。然而，直接在 CSS 选择器中使用变量并不简单。
假设你有一个变量 $gutter 设置为 10。你可能想在选择器中使用它来根据 $ 的值动态生成类名
问题：
如果您尝试直接在选择器中使用变量，如下所示：
<code class="scss">.grid+$gutter {
background: red;
}</code>这将导致无效的 CSS 类。正如预期的那样，输出不会是 .grid10。
解决方案：
要在 CSS 选择器中使用变量，您需要使用 #{$var-name}句法。下面的代码演示了如何使用 $gutter 变量生成类名：
<code class="scss">$gutter: 10;
.grid#{$gutter} {
background: red;
}</code>这将生成以下 CSS：
<code class="css">.grid10 {
background: red;
}</code>请注意，# 之前是必需的变量名称。
附加说明：
#{$var-name} 语法也可用于在字符串中包含变量，例如在 URL 中：
<code class="scss">background: url('/ui/all/fonts/#{$filename}.woff')</code>以上是如何通过 SCSS 在 CSS 选择器中使用变量？的详细内容。更多信息请关注PHP中文网其他相关文章！
