如何通过 SCSS 在 CSS 选择器中使用变量？

在 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中文网其他相关文章！