0

我正在学习 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;
   }
 }

那会需要我改用一个类吗...

4

1 回答 1

2

因为你在这里扩展元素a：

@extend a;

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

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

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

更新

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

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

那会需要我改用一个类吗...

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

像这样的东西：

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

这是一个SASS 演示

于 2017-05-08T20:49:33.193 回答