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就会赢得＆＃34;合并＆＃34;它们。

您有footer a，在a中扩展.head-links时，会将#footer .head-links添加到现有规则#footer a

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

<强>更新

我怎样才能避免这种情况。如何才能延长： -

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

这是否需要我使用课程......

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

类似的东西：

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

这是一个SASS demo

为什么SASS编译不需要/未使用的代码

1 个答案: