Question

我正在尝试使用Sass完成以下CSS输出：

.selector1 + .selector1, .selector2 + .selector2 {
    margin-top: -80px;
}

@extend功能应该完成这项工作：

%sibling-selector {
    & + & {
        margin-top: -80px;  
    }
}
.selector1 {
    @extend %sibling-selector;
}
.selector2 {
    @extend %sibling-selector;
}

但似乎扩展函数在仅扩展类定义（％sibling-selector）中的两个父引用（＆amp;）存在问题。这是输出：

.selector1 + .selector1, .selector2 + .selector1, 
.selector1 + .selector2, .selector2 + .selector2 {
    margin-top: -80px;
}

所以@extend函数为每个使用@extend定义的选择器组合制作兄弟选择器。

虽然我希望@extend保持在当前选择器的“范围”中，因此＆符号被当前选择器替换。这是一个错误还是一个功能？： - ）

我知道我可以使用mixin来完成这项工作，

@mixin sibling-selector {
    & + & {
        margin-top: -80px;
    }
}
.selector1 {
    @include sibling-selector;
}
.selector2 {
    @include sibling-selector;
}

但这会产生重复的CSS定义：

.selector1 + .selector1 {
    margin-top: -80px;
}
.selector2 + .selector2 {
    margin-top: -80px;
}

有没有办法让Sass做到正确？

Answer 1

似乎@extend不是获得所需结果的方式：https://github.com/nex3/sass/issues/848#issuecomment-20903684

为了“自动化”兄弟选择器的创建，我使用了一个小的@each循环来创建一个选择器列表。

$siblingSelectors: ();
@each $selector in selector1 selector2 selector3 {
    $classSelector: unquote('.prefix-' + $selector);
    $siblingSelectors: append($siblingSelectors, unquote($classSelector + ' + ' + $classSelector), comma);
}

#{$siblingSelectors} {
    margin-top: 80px;
    &.large {
        margin-top: -100px;
    }
}

这给出了以下结果：

.prefix-selector1 + .prefix-selector1, .prefix-selector2 + .prefix-selector2 {
    margin-top: -80px;
}
.prefix-selector1 + .prefix-selector1.large, .prefix-selector2 + .prefix-selector2.large {
    margin-top: -100px;
}

Sass @extend兄弟选择器引用父选择器（＆符号）

1 个答案: