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

【问题标题】：sass mixin + it-self as consecutive tag?sass mixin + it-self 作为连续标签？
【发布时间】：2022-01-13 13:57:08
【问题描述】：

我正在寻找一种方法来制作与 .bloc + .bloc 或 .article + .article 等效的方法，但直接来自 mixin 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”的类可以直接从 mixin 中生成与 .bloc + .bloc 或 .article + .article 的等价物？

【问题讨论】：

标签： css sass mixins scss-mixins

【解决方案1】：

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

@mixin bloc-article() {
  // …

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

编译自：

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

到：

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

这里，Sass 父选择器是您正在寻找的$this。

来自docs：

父选择器 & 是 Sass 发明的一种特殊选择器，在嵌套选择器中用于引用外部选择器。它使得以更复杂的方式重用外部选择器成为可能，例如添加伪类或在父级之前添加选择器。

【讨论】：