Mixins 和占位符选择器范围 - 样式未应用于当前选择器答案

【问题标题】：Mixins and placeholder selector scope - Styles not being applied to current selectorMixins 和占位符选择器范围 - 样式未应用于当前选择器
【发布时间】：2013-07-17 01:41:07
【问题描述】：

我正在编写一个 mixin，用于在盒子的角上添加图形效果：

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 限定。为什么会这样？

【问题讨论】：

标签： sass

【解决方案1】：

由于扩展的性质，输出完全符合我的预期。 %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);
}

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

【讨论】：

谢谢！将占位符选择器可视化为普通类很有帮助。

【解决方案2】：

你的代码结构似乎搞砸了。

我不确定为什么会出现这个额外的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);
}

演示：http://sassbin.com/gist/6019481/

【讨论】：