是否可以在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;
}

请注意，如果您使用certain versions of LibSass，则无效。有关其工作原理的详细信息，请参阅this question。