是否可以在 Sass 中连接两个没有 parent 的兄弟姐妹？

Question

我想要的是在 parent 中连接两个 child，但不选择输出中的 parent。

我的意思是：

.parent {
  .child {
    color: green;
    & + & {
      margin-top: 6px;
    }
  }
}

在输出中我有这个：

.canvas-btn .canvas-btn__icon + .canvas-btn .canvas-btn__icon {margin-top: 6px;}

但是如果可以在不复制代码的情况下进行下一种方式是 Sass?

.canvas-btn .canvas-btn__icon + .canvas-btn__icon {margin-top: 6px;}

Answer 1

您需要在此处将父选择器 (&) 用作变量，并将其视为列表的列表：

@function nest-adjacent-selector($sel) {
    $new-sel: ();
    @each $s in $sel {
        $last: nth($s, -1);
        $new-sel: append($new-sel, $s #{'+'} $last, comma);
    }
    @return $new-sel;
}

.parent {
    .brother, .sister {
        color: green;
        @at-root #{nest-adjacent-selector(&)} {
            margin-top: 6px;
        }
    }
}

输出：

.parent .brother, .parent .sister {
  color: green;
}
.parent .brother + .brother, .parent .sister + .sister {
  margin-top: 6px;
}

请注意，如果您使用 certain versions of LibSass. For more information on how this works, see ，这将不起作用。

是否可以在 Sass 中连接两个没有 parent 的兄弟姐妹？

Is it possible to concatenate two siblings without parent in Sass?

sass

siblings