SASS 中的与号 (&):在末尾和选择器内使用它
开发人员在使用与号 (&) 时经常遇到挑战SASS 选择器中的字符,尤其是当它出现在选择器末尾或内部时。本次调查深入研究了这个特定问题。
所提出的 mixin 尝试将一些 LESS 代码移植到 SASS。但是,由于选择器中 & 的使用不正确,代码无法生成所需的输出。
要理解 & 字符的用途,了解其作为父选择器占位符的作用至关重要。当在 mixin 或块中使用时,& 表示调用 mixin 的选择器或类。
在这种情况下,mixin 的预期行为是生成包含调用元素的类名的选择器。例如,如果在
.callerClass .foreverAlone { ... } .callerClass .iThink .illNeverWork.callerClass { color: #123ABC; ... }
但是,由于 & 的位置不正确,提供的代码无法实现此目的。要解决此问题,应适当使用 & 来表示父选择器:
@mixin button-variant($color, $background, $border) { { ... .foreverAlone{ ... } .iThink &.illNeverWork { color: #123ABC; ... } }
通过此更正的实现,mixin 将正确地将调用者类添加到 mixin 中生成的任何嵌套选择器之前。请记住,& 的放置和使用会显着影响最终的 CSS 输出,因此准确使用它至关重要。
以上是如何正确使用 SASS 选择器中的'&”作为父选择器引用?的详细内容。更多信息请关注PHP中文网其他相关文章!