html - 有没有办法在 SASS 中对选择器进行分组？

Question

例如，如果我有一些链接，并且我想让一些链接在悬停或单击时变为绿色和红色。

而不是这样做：

.links a {
 color: green;
}

.links a:visited {
 color: green;
}

.links a:hover {
 color: red;
}

.links a:active {
 color: red;
}

<div class="links">
  <a href="#">Link 1</a>
  <a href="#">Link 1</a>
</div>

我能做什么？

我尝试使用 .links a:hover, a:active{}，.links a,a:visited{} 但是导致其他链接使用此规则中的颜色。

如果这是相关的，我正在使用带有 sass 的 bootstrap 4。

标签： htmlcsssassbootstrap-4

Answer 1

我相信使用 SASS（与 SCSS 不同）会是

.links   
  & a, a:visited 
    color: green 
  & a:hover, a.active
    color: red

编译后生成：

.links a, .links a:visited {
  color: green;
}
.links a:hover, .links a.active {
  color: red;
}

SCSS 版本

.links {
  & a, a:visited {
    color: green;
  }
  & a:hover,  a.active {
    color: red;
  }
}