Sass 混合和占位符选择器作用域-样式未应用于当前选择器

我正在编写一个mixin，用于将图形效果添加到长方体的角落：

混音器将接受一个角位置（tl、tr、bl、br）、大小和颜色：

@mixin notch($notch-location, $size, $foreground-color, $background-color) {
    %top--left {
        @extend %notch;

        &:before {
            top: 0; left: 0;
            border-width: $size $size 0 0;
        }
    }

    // etc ...

    %notch {
        position: relative;

        &:before {
            @extend .pel;

            position: absolute;
            border-style: solid;
            border-color: $foreground-color $background-color;
        }
    }

    @if $notch-location == top-left {
        @extend %top--left;
    }

    // etc ...
}

然后在选择器上使用mixin，例如：

a {
    @include notch(top-left, 24px, $color-brand, #fff);
}

不幸的是，生成的CSS不是我所期望的：

.menu.collapsed .nav .nav--current a a:before {
  top: 0;
  left: 0;
  border-width: 24px 24px 0 0;
}
.menu.collapsed .nav .nav--current a a {
  position: relative;
}
.menu.collapsed .nav .nav--current a a:before {
  position: absolute;
  border-style: solid;
  border-color: #ec5b25 white;
}

---

示例：

---

---

如您所见，通过mixin添加的样式将通过额外的

a

进行限定。为什么会发生这种情况？

您似乎把代码结构搞砸了

我不确定为什么会出现这个额外的

a

，但当我重构您的代码以获得合理的结构时，问题就消失了：

$color-brand: pink;

%notch {
    position: relative;

    &:before {
        @extend .pel !optional;

        position: absolute;
        border-style: solid;
    }
}

%top--left {
    @extend %notch;

    &:before {
        top: 0; left: 0;
    }
}

@mixin notch($notch-location, $size, $foreground-color, $background-color) {

    border-color: $foreground-color $background-color;

    @if $notch-location == top-left {
        @extend %top--left;
        border-width: $size $size 0 0;
    }
    // etc ...
}


a {
    @include notch(top-left, 24px, $color-brand, #fff);
}

---

演示：

由于extends的性质，输出完全符合我的预期。

%notch

类属于父选择器（

a

）。如果将其改为

.notch

，它会变得很明显

扩展类不是短暂的。最好避免在计划重用的mixin中定义它们。这样做将导致每次调用mixin时生成类，从而导致代码到处重复（这可能是您不希望的）

---

还值得注意的是，扩展并不总是最佳选择，它们可能会导致代码比由于重复选择器而简单地复制代码时要大。

谢谢！将占位符选择器可视化为普通类是一个很大的帮助。

%notch {
    position: relative;

    &:before {
        @extend .pel;

        position: absolute;
        border-style: solid;
    }
}

@mixin notch($notch-location, $size, $foreground-color, $background-color) {
    @extend %notch;
    border-color: $foreground-color $background-color;

    &:before {
        @if $notch-location == top-left {
            top: 0; left: 0;
            border-width: $size $size 0 0;
        } @else if $notch-location == top-right {
            top: 0; right: 0;
            border-width: $size 0 0 $size;
        } @else if $notch-location == bottom-left {
            bottom: 0; left: 0;
            border-width: 0 $size $size 0;
        } @else {
            bottom: 0; right: 0;
            border-width: 0 0 $size $size;
        }
    }
}

a {
    display: block;
    width: 100px; height: 100px;
    background: #0f0;

    @include notch(top-left, 24px, #0f0, #0f0);
}