薩斯@extend兄弟選擇引用父選擇（符號）

我試圖完成與薩斯以下CSS輸出：薩斯@extend兄弟選擇引用父選擇（符號）

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

有沒有辦法用無禮的權利得到它？

來源

2013-07-12 Huyby

這似乎是對我的錯誤 - 這樣是不是真的佔的邊緣情況。您可能想要在GitHub上提交項目問題。同時：（1）'@ mixin'方法或者（2）只需將期望的輸出編碼爲vanilla CSS並稱之爲一天。 – founddrama

你應該提交一份錯誤報告。 https://github.com/nex3/sass/issues –

在github上添加了一個新問題：https：//github.com/nex3/sass/issues/848 – Huyby

看來@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-15 08:19:22 Huyby

薩斯@extend兄弟選擇引用父選擇（符號）

回答

相關問題