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

SCSS 选择器中的变量用法

在 SCSS 中，利用变量创建动态选择器可能是一种有用的技术。但是，语法不支持直接在选择器中使用变量（例如在您的示例中）。

要在选择器中有效使用变量，您可以将它们用作选择器本身的前缀或后缀。这允许您动态生成特定的类名。例如，您可以按如下方式修改代码：

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

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

通过此修改，生成的 CSS 将包含具有所需背景颜色的类 .grid10：

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

此外，您可以使用字符串中的变量来动态创建 URL 或其他需要字符串插值的元素。例如：

<code class="scss">$gutter: 10;
$filename: 'sans-serif';

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

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