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

选择器中的变量插值

在 SCSS 中，变量存储可以在整个样式表中引用的值。然而，直接使用变量作为选择器会带来一定的限制。让我们探索这个场景并找到解决方案。

挑战：在选择器中使用变量

您将变量 $gutter 设置为 10 并希望在选择器 .grid $gutter。此代码尝试创建一个具有红色背景的类 .grid10。但是编译失败。

解决方案：使用 #{$} 进行插值

要在选择器中使用变量，我们需要使用 #{$} 进行插值句法。方法如下：

<code class="scss">$gutter: 10;

.grid#{$gutter} {
    background: red;
}</code>

通过将变量 $gutter 括在 #{$} 内，我们将其值插入到选择器字符串中，从而生成 .grid10。这将生成所需的 CSS：

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

在字符串中使用时，例如 URL，插值的工作方式类似：

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

附加说明：

• 插值只能在选择器内的某些上下文中使用，例如类或 ID 名称之后。
• 如果您需要更复杂的动态选择器场景，请考虑使用 mixins 来实现代码可重用性.

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