如何正确使用 SASS 选择器中的'&”作为父选择器引用？

SASS 中的与号 (&)：在末尾和选择器内使用它

开发人员在使用与号 (&) 时经常遇到挑战SASS 选择器中的字符，尤其是当它出现在选择器末尾或内部时。本次调查深入研究了这个特定问题。

所提出的 mixin 尝试将一些 LESS 代码移植到 SASS。但是，由于选择器中 & 的使用不正确，代码无法生成所需的输出。

要理解 & 字符的用途，了解其作为父选择器占位符的作用至关重要。当在 mixin 或块中使用时，& 表示调用 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中文网其他相关文章！