SCSS 变量可以直接在 CSS 选择器中使用吗？

SCSS 中的动态选择器语法

变量提供了一种参数化 CSS 样式表的便捷方法，允许高度动态和可重用的代码。然而，问题出现了：可以在 CSS 选择器中利用变量吗？

提供的示例展示了在选择器中使用变量 $gutter 的尝试，如下所示：

<code class="scss">.grid+$gutter {
    background: red;
}</code>

所需的输出是类选择器 .grid10，背景色为红色。但是，这种特定语法在 SCSS 中无效。

为了实现所需的功能，SCSS 提供了一种涉及 #{} 占位符的替代语法：

<code class="scss">.grid#{$gutter} {
    background: red;
}</code>

在这种情况下，变量$gutter 使用 #{} 语法插入到选择器中。生成的 CSS 输出为：

<code class="css">.grid10 {
    background: red;
}</code>

此外，可以在字符串上下文中插入变量，例如 URL：

<code class="scss">background: url('/ui/all/fonts/#{$filename}.woff')</code>

这允许动态构造 URL 和其他基于字符串的内容属性。

以上是SCSS 变量可以直接在 CSS 选择器中使用吗？的详细内容。更多信息请关注PHP中文网其他相关文章！