Mixins 和占位符选择器范围 - 样式未应用于当前选择器 [英] Mixins and placeholder selector scope - Styles not being applied to current selector

问题描述

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

I'm writing a mixin for adding a graphical effect to the corner of a box:

mixin 将接受角位置(tl、tr、bl、br)、大小和颜色:

The mixin will accept a corner position (tl, tr, bl, br), size, and colors:

@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，例如:

I then use the mixin on a selector, for example:

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

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

Unfortunately the resulting CSS isn't what I'm expecting:

.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;
}

<小时>

示例:

• SCSS (jsFiddle)
• 编译的 CSS (jsFiddle)

如您所见，通过 mixin 添加的样式被额外的 a 限定.为什么会发生这种情况?

As you can see, the styles added via the mixin are being qualified with an extra a. Why is this happening?

推荐答案

由于 extends 的性质，输出完全符合我的预期.%notch 类属于父选择器(在您的情况下为 a ).如果你改成.notch，就很明显了.

The output is exactly as I would expect because of the nature of extends. The %notch class belongs to the parent selector (a in your case). If you change it to .notch instead, it becomes obvious.

扩展类不是短暂的.避免在您计划重用的 mixin 中定义它们是一个好主意.这样做会导致每次调用 mixin 时都会生成该类，从而导致到处都是代码重复(您可能不想要).

Extend classes are not ephemeral. It's a good idea to avoid defining them within a mixin you plan on reusing. Doing so will cause the class to be generated each time you invoke the mixin, causing duplication of code all over the place (which you probably don't want).

%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);
}

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

It's also worth noting that extends aren't always the best choice, they can cause the code to be larger than it would be if you'd simply duplicated the code due to repeating the selector.

这篇关于Mixins 和占位符选择器范围 - 样式未应用于当前选择器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！