SASS 选择器中的'&”如何动态生成子选择器？

Susan Sarandon

发布： 2024-10-28 20:04:31

原创

596 人浏览过

How does the ampersand (&) work in SASS selectors to dynamically generate child selectors?

SASS 选择器中的与号 (&)

在 SASS 中，与号 (&) 在选择器中使用时具有特殊含义。如提供的 mixin 示例所示，它可用于将父选择器的一部分附加到子选择器。

对于 3.2 以下的 Sass 版本，可以接受以下语法：

.foo {
    &amp;, &amp;.bar, &amp;#bar, &amp;:after, &amp;[active] {
        color: red;
    }
}

登录后复制

此外，还支持以下语法：

.foo {
    .bar &amp; {
        color: red;
    }
}

登录后复制

从 Sass 3.3 开始，以下语法有效：

.foo {
    &amp;bar, &amp;-bar {
        color: red;
    }
}

登录后复制

最后，Sass 3.4 引入了另一种方法：

.foo {
    $foo: &amp;;
    @at-root bar#{&amp;} {
        color: red;
    }
}

登录后复制

通过利用这些技术，您可以动态生成包含父选择器部分的子选择器。这在创建可应用于不同父类的 mixins 时特别有用。

以上是SASS 选择器中的'&”如何动态生成子选择器？的详细内容。更多信息请关注PHP中文网其他相关文章！

来源：php.cn

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

作者最新文章