Question

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

Screenshot example of graphical effect

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

Answer 1

由于扩展的性质，输出完全符合我的预期。 %notch类属于父选择器（在您的情况下为a）。如果您将其更改为.notch，则会变得明显。

扩展类不是短暂的。最好避免在计划重用的混合中定义它们。这样做会导致每次调用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);
}

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

Answer 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/

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

2 个答案: