Pourquoi SASS compile-t-il un code non désiré/non utilisé

Question

J'apprends le SASS et j'essaie quelques exemples. J'ai un peu de mal à comprendre la séquence de sélection et pourquoi SASS les fusionne.

Dans un scénario réel, la sortie peut avoir des CSS inutiles. Pour exemple: -

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

#footer a{ 
    color: #a61717; 
} 

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

Ce bloc de code est conforme à: -

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

Le problème est que

#footer .head-links 

pourrait jamais être utilisé. Alors, quel est le point de fusionner la séquence du sélecteur si ce n'est pas nécessaire.

Comment puis-je éviter this.How puis-je faire prolonger seulement: -

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

Would qui me place en utilisant une requiers classe ...

Answer 1

parce que vous étendez l'élément a ici:

@extend a; 

Si vous le supprimez, le SASS ne les fusionnera pas.

vous avez footer a et lors de l'extension du a en .head-links il ajoutera #footer .head-links à la règle #footer a

déjà existante ce qui signifie qu'il s'étendre à tout a dans le CSS, pas seulement le sélecteur a seul

MISE À JOUR

Comment puis-je éviter cela.Comment puis-je ma ke il prolonger seulement: -

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

Would qui me place en utilisant une requiers classe ...

oui, vous devez utiliser une classe ou d'une carte d'identité pour cela.

quelque chose comme ceci:

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

ici est un SASS demo