при любых раскладах на выходе будет говно, которое в итоге руками разгребать придется

"пользователь решить закрыть вкладку" и "курсор уходит за пределы окна", это совершенно разные вещи... так, на всякий случай

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

%placeholder {
  font-weight: bold;
}
a%placeholder {
  text-decoration: none;
}
.item {
 @extend %placeholder
}

скомпилится в

.item {
  font-weight: bold;
}
a.item {
  text-decoration: none;
}

a

.placeholder {
  font-weight: bold;
}
a.placeholder {
  text-decoration: none;
}
.item {
 @extend .placeholder
}

скомпилится в

.placeholder, .item {
  font-weight: bold;
}
a.placeholder, a.item {
  text-decoration: none;
}

соответственно если применить это по пять раз, в первом случае сгенерируется 5 блоков правил для разных селекторов, а во втором для одного блока правил добавится куча селекторов, к которым он применяется