为什么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