Sass @extend родственный селектор ссылок родительского селектор (амперсанд)

Question

Я пытаюсь выполнить следующий вывод CSS с Sass:

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