Объединение последовательностей селекторов

Иногда последовательность селекторов расширяет другой селектор, который также является частью последовательности. В этом случае эти две последовательности селекторов должны быть объединены. Например:

#admin .tabbar a {
  font-weight: bold;
}

#demo .overview .fakelink {
  @extend a;
}

#admin .tabbar a
  font-weight: bold

#demo .overview .fakelink
  @extend a

Несмотря на то, что технически можно было бы сгенерировать все селекторы, которые могли бы соответствовать любой последовательности, этого не происходит, так как это сделало бы таблицу стилей слишком большой. Вышенаписанному примеру потребовалось бы десять селекторов. Вместо этого Sass генерирует только те селекторы, которые могут быть полезны.

Когда объединяются две последовательности, не имеющие общих селекторов, то генерируются новые селекторы: один с первой последовательностью перед вторым и один со второй последовательностью перед первым. Например:

#admin .tabbar a {
  font-weight: bold;
}

#demo .overview .fakelink {
  @extend a;
}

#admin .tabbar a
  font-weight: bold

#demo .overview .fakelink
  @extend a

#admin .tabbar a,
#admin .tabbar #demo .overview .fakelink,
#demo .overview #admin .tabbar .fakelink {
  font-weight: bold; 
}

Если две последовательности имеют какой-то общий селектор, то эти селекторы будут объединены вместе и только различия (если таковые существуют) будут чередоваться. В следующем примере обе последовательности имеют идентификатор #admin, значит, в результате эти два идентификатора будут объединены:

#admin .tabbar a {
  font-weight: bold;
}

#admin .overview .fakelink {
  @extend a;
}

#admin .tabbar a
  font-weight: bold

#admin .overview .fakelink 
  @extend a

#admin .tabbar a,
#admin .tabbar .overview .fakelink,
#admin .overview .tabbar .fakelink {
  font-weight: bold; 
}