SASS複製嵌套選擇器

Question

我爲一個項目使用SASS，到目前爲止我對它非常滿意。 但是，我有一些代碼只能用於IE 7及其以下版本，因此使用類名.ie-lt8即可。但是，當我在SASS中擴展該選擇器時，使用嵌套選擇器創建多個選擇器。

實施例（用於延伸一個IE display: inline-block代碼）：

SASS

/* My extension code */ 
.ie-lt8 %ie-inline-block { 
    display: inline; 
    zoom: 1; 
} 

/* I want the li to be inline-block */ 
#my-ul li { 
    display: inline-block; 
    @extend %ie-inline-block; 
} 

CSS產生

/* My extension code */ 
.ie-lt8 #my-ul, #my-ul .ie-lt8 li { 
    display: inline; 
    zoom: 1; 
} 

/* I want the li to be inline-block */ 
#my-ul li { 
    display: inline-block; 
} 

通常這僅僅是很好，但#my-ul .ie-lt8 li我擔心一點。在這個例子中沒關係，因爲兩個選擇器都能正常工作（上面提到的選擇器不存在）。但是如果我有另一個選擇器很重要的代碼，那麼這會導致一個問題。

一個念頭例如：

SASS

/* I want the div to get a red border, 
    but the div inside .container to have a green border */ 
#myid .container div { border: 5px dotted green; } 
#myid div { 
    @extend %red-border; 
} 

/* My extension code */ 
.container %red-border { 
    border: 1px solid red; 
} 

CSS它會產生

/* I want the div to get a red border, 
    but the div inside .container to have a green border */ 
#myid .container div { border: 5px dotted green; } 

/* My extension code */ 
.container #myid div, #myid .container div { 
    border: 1px solid red; /* [OVERRIDE OF THE BORDER] */ 
} 

我的問題是那麼;有沒有辦法讓SASS只採用初始選擇器，而不是從嵌套選擇器（一個語句中的很多選擇器）創建多個選擇器？

我試過這個問題，但我發現很難找到任何文章/博客/等。關於這個問題。

UPDATE

我知道各種解決方法，如使用@混入的過程，而不是。我只是想知道是否有我錯過了重要的SASS，或者如果有人能告訴我爲什麼這是？因爲它在我看來就像是一種錯誤。

Answer 1

我的回答是SCSS - 不SASS所以你必須要轉換...

對於瀏覽器針對這樣的，我會建議使用的混入，而且 - 內@content @混合來達到你想要的效果。它還建立了一套更容易理解的與上下文相關的規則。

對於您的具體示例，就像將內聯塊修復移到mixin中一樣簡單，而不是僅將其聲明爲類。

@mixin ie7-inline-block { 
    display: inline; 
    zoom: 1; 
} 

#my-ul li { 
    display: inline-block; 
    .ie-lt8 & { 
     @include ie7-inline-block; 
    } 
} 

即使比雖然好，使用@content，你總是可以確保您的風格加上前綴.IE-LT8通過使一個mixin，像這樣：

@mixin ie7 { 
    .ie-lt8 & { 
     @content; 
    } 
} 

#my-ul li { 
    display: inline-block; 
    @include ie7 { 
     display: inline; 
     zoom: 1; 
    } 
} 

將輸出的相同的CSS，但允許您的IE7特定樣式每次在某些情況下進行打包，這對任何讀取您的代碼的人都是有意義的。