sass mixin + it-self 作为连续标签？

Question

我正在寻找一种方法来制作等同于 .bloc + .bloc 或 .article + .article 但直接来自混合 bloc-article() :

@mixin bloc-article() {

    margin-top: 20px;
    margin-top: 50px;

    & + "bloc-article()" { // is there a "$this"-like to make an equivalent to `.bloc + .bloc` or `.article + .article` here ?
        border-top: 1px solid red;
    }
}

.bloc {
    @include bloc-article();
}

.article {
    @include bloc-article();
}

是否有一个“$this”-like 可以直接从 mixin 生成等同于 .bloc + .bloc 或 .article + .article 的东西？

Answer 1

你可以用 & + & 选择器编写你的 mixin：

@mixin bloc-article() {
  // …

  & + & {
    border-top: 1px solid red;
  }
}

编译自：

.article {
  @include bloc-article();
}

至：

.article + .article {
  border-top: 1px solid red;
}

这里的Sass父选择器就是你要找的$this

来自docs：

The parent selector, &, is a special selector invented by Sass that’s used in nested selectors to refer to the outer selector. It makes it possible to re-use the outer selector in more complex ways, like adding a pseudo-class or adding a selector before the parent.

sass mixin + it-self 作为连续标签？

sass mixin + it-self as consecutive tag?

css

sass

mixins

scss-mixins