爲什麼SASS編譯不需要/未使用的代碼

Question

我正在學習SASS並嘗試一些示例。我對理解選擇器序列有一些疑問，以及爲什麼SASS將它們合併。

在現實世界的情況下，輸出可能有不需要的CSS。對於如： -

a{ 
    color: #0086B3; 
    &:hover{ 
     text-decoration: none; 
    } 
} 

#footer a{ 
    color: #a61717; 
} 

.head-links{ 
    @extend a; 
    font-weight: bold; 
} 

的代碼塊符合於： -

a, .head-links { 
    color: #0086B3; 
} 
a:hover, .head-links:hover { 
    text-decoration: none; 
} 

#footer a, #footer .head-links { 
    color: #a61717; 
} 

.head-links { 
    font-weight: bold; 
} 

的問題是，

#footer .head-links 

可能永遠不會被使用。那麼，如果不需要，選擇器序列合併的意義何在。

如何避免我this.How可以使它只能擴展 - 因爲你在這裏延伸的元件a

a{ 
    color: #0086B3; 
    &:hover{ 
    text-decoration: none; 
    } 
} 

會要求我使用一類，而不是...

Answer 1

：

@extend a; 

如果你刪除它，那麼SASS將不會「合併」它們。

你有footer a和.head-links延長a時，它會增加#footer .head-links到已經存在的規則#footer a

這意味着它將擴展到任何a在CSS中，而不僅僅是選擇a單獨

UPDATE

如何避免this.How可我是個磕它只能延長： -

a{ color: #0086B3; &:hover{ text-decoration: none; } }

會要求我使用一類，而不是...

是的，你需要使用一類或爲一個ID。

是這樣的：

.uniqueclass{ 
    color: #0086B3; 
    &:hover{ 
    text-decoration: none; 
    } 
} 

這裏是一個SASS demo