0

我正在编写一个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. 为什么会这样？

4

2 回答 2

2

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

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

于 2013-07-17T11:33:43.967 回答
0

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

我不确定为什么会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/

于 2013-07-17T10:39:28.143 回答