SASS 选择器中的与号 (&):扩展父范围
在 SASS 中,与号 (&) 符号是一个强大的工具扩展父选择器。它允许您以包含父选择器自己的类名的方式在 mixin 中嵌套规则。然而,在选择器末尾使用&符号提出了一个独特的挑战。
问题在于确保选择器包含调用者类名。考虑以下 Sass mixin:
<code class="sass">@mixin button-variant($color, $background, $border) { ... .foreverAlone { ... } .iThink .illNeverWork& { color: $pinkUnicornRainbow; ... } }</code>
当在另一个 CSS 类中调用此 mixin 时,生成的代码将不包含调用者的类名。相反,它会生成:
<code class="css">.foreverAlone { ... } .iThink .illNeverWork.callerClass { color: #123ABC; ... }</code>
要解决此问题,您可以利用以下技术:
Sass 版本 3.2 及更早版本:
<code class="sass">@mixin button-variant($color, $background, $border) { ... .foreverAlone, .iThink &.illNeverWork { color: $pinkUnicornRainbow; ... } }</code>
Sass 版本 3.3:
<code class="sass">@mixin button-variant($color, $background, $border) { ... .iThink &-illNeverWork { color: $pinkUnicornRainbow; ... } }</code>
Sass 版本 3.4:
<code class="sass">@mixin button-variant($color, $background, $border) { ... $parent: &; @at-root .iThink#{&} { color: $pinkUnicornRainbow; ... } }</code>
通过实现这些技术,您可以有效地扩展 mixin 中的父选择器,确保生成的代码包含调用者类名。
以上是在选择器末尾使用与号 (&) 时,如何在 SASS Mixins 中扩展父选择器?的详细内容。更多信息请关注PHP中文网其他相关文章!