CODEWITHSUNDEEP
csssasscompass-sassscss-lint
Stacy J
Stacy J

Reputation: 2781

Why does SASS compile unwanted / unused code

I am learning SASS and trying out some examples. I have some problem understanding Selector Sequence and why SASS merges them.

In a real world scenario the output can have unwanted css. For eg:-

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

#footer a{
  color: #a61717;
}

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

This block of code complies to :-

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

The problem is that

#footer .head-links

might never be used. So what is the point of merging selector sequence if it is not required.

How can I avoid this.How can I make it extend only :-

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

Would that require me using a class instead...

Upvotes: 0

Views: 424

Answers (1)

dippas
dippas

Reputation: 60603

because you are extending the element a here:

@extend a;

if you remove it, then the SASS won't "merge" them.

you have footer a and when extending the a in .head-links it will add #footer .head-links to the already existing rule #footer a

Which means it will extend to ANY a in the CSS, not just the selector a alone

UPDATE

How can I avoid this.How can I make it extend only :-

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

Would that require me using a class instead...

yes you would need to use a class or an ID for that.

something like this:

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

here is a SASS demo

Upvotes: 2

Related Questions