Если у меня есть определение стиля в SCSS, которое выглядит следующим образом:
#someid {
...
.message {
...
&.error {
// overrides of .message class
}
}
}
Итак, я отображаю сообщения в своем пользовательском интерфейсе, которые могут быть обычными сообщениями (иметь .message
класс) или ошибки (имеют оба класса .message.error
).
Теперь у меня есть другой элемент, который отображает аналогичную информацию в обычном и ошибочном виде, поэтому я хотел бы воспроизвести настройки ошибок.
Как мне использовать директиву @extend, не помещая стили в отдельный класс, а затем расширяя/используя ее в обоих стилях .error
или используя миксин для той же цели? Я просто хотел бы повторно использовать одно и то же определение стиля.
Проблема в том, что он сочетает в себе все виды наследования классов, когда я делаю @extend
.
#otherid {
...
.notification {
...
&.error {
// should use the other ".error" style
}
}
}
Проблема в том, что скомпилированные результаты имеют такое определение стиля, которое представляет собой сочетание объединенных селекторов:
#someid .message.error,
#someid #otherid .message.notification.error,
#otherid #someid .message.notification.error
Хотя я предпочел бы иметь только эти два:
#someid .message.error,
#otherid .notification.error