Is there a way to group a selectors in SASS?

Question

For example, if I had some links, and I wanted to make some links green and red when hovered on or clicked.

Instead of doing:

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

What could I do?

I tried using .links a:hover, a:active{} and .links a,a:visited{} however that resulted in other links using the color in this rule.

If this is relevant, I am using bootstrap 4 with sass.

Answer 1

I believe with SASS(unlike SCSS) It would be

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

producing once compiled:

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

SCSS version

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