有没有可能在Sass中连接两个没有父母的兄弟姐妹

Question

我想要的是在父级中连接两个子级，但在输出时不选择父级。

我的意思是：

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

请注意，如果您使用某些版本的LibSass，这将不起作用。有关如何工作的更多信息，请参阅此问题。