Расширение составным селектором

Селекторы классов не единственные вещи, которые могут быть расширены. Это позволяет расширять любой селектор, включая одиночные элементы, такие как .special.cool, a:hover или a.user[href^="http://"]. Например:

.hoverlink {
  @extend a:hover;
}

.hoverlink
  @extend a:hover

Также, как и с классами, это означает, что все стили объявленные для a:hover также применятся и к .hoverlink. Например:

.hoverlink {
  @extend a:hover;
}

a:hover {
  text-decoration: underline;
}

.hoverlink
  @extend a:hover

a:hover
  text-decoration: underline

a:hover, .hoverlink {
  text-decoration: underline; 
}

Также, как и с .error.intrusion, описанным в предыдуших главах, любые правила используемые a:hover будут также применятся и к .hoverlink, даже если с ними используются другие селекторы. Например:

.hoverlink {
  @extend a:hover;
}

.comment a.user:hover {
  font-weight: bold;
}

.hoverlink
  @extend a:hover

.comment a.user:hover
  font-weight: bold

.comment a.user:hover, 
.comment .user.hoverlink {
  font-weight: bold; 
}