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

可能永远不会被使用。那么如果不需要合并选择器序列有什么意义。

我怎样才能避免这种情况。我怎样才能让它只扩展:-

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

这是否需要我改用类...

Answer 1

因为您要在此处扩展元素 a:

@extend a;

如果您删除它，SASS 将不会“合并”它们。

你有 footer a，当在 .head-links 中扩展 a 时，它会添加 #footer .head-links 到已经存在的规则 #footer a

这意味着它将扩展到 CSS 中的任何 a，而不仅仅是选择器 a

更新

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...

是的，您需要为此使用类或 ID。

像这样:

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

这是一个SASS demo