2

我正在尝试使用 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）中的两个父引用（&）存在问题。这是输出：

.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 把它弄好？

4

1 回答 1

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;
}
于 2013-07-15T08:19:22.177 回答