Warum kompiliert SASS unerwünschten/unbenutzten Code

Question

Ich lerne SASS und probiere einige Beispiele aus. Ich habe ein Problem damit, Selector Sequence zu verstehen und warum SASS sie zusammenführt.

In einem realen Szenario kann die Ausgabe unerwünschte CSS haben. Für zB: -

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

#footer a{ 
    color: #a61717; 
} 

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

Dieser Codeblock entspricht zu: -

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

Das Problem ist, dass

#footer .head-links 

vielleicht nie verwendet werden. Also, was ist der Punkt der Zusammenführung von Selektor-Sequenz, wenn es nicht erforderlich ist.

Wie kann ich vermeiden this.How kann ich es nur machen verlängern: -

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

Würde, die mich stattdessen eine Klasse verwenden, erfordern ...

Answer 1

, weil Sie das Element erweitern a hier:

@extend a; 

Wenn Sie es entfernen, wird das SASS sie nicht "zusammenführen".

haben Sie footer a und wenn die a in .head-links Verlängerung wird es #footer .head-links auf die bereits bestehende Regel #footer a

hinzufügen Was bedeutet, dass es zu jedem a im CSS erweitern wird, nicht nur die Wähler a allein

UPDATE

Wie kann ich vermeiden this.How kann ich ma ke es erstreckt sich nur: -

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

Würde, die ich benötigen eine Klasse anstelle ...

ja müßten Sie eine Klasse oder eine ID für das verwenden.

etwas wie folgt aus:

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

hier ist ein SASS demo