Повторное использование стилей в SASS/SCSS без объединения селекторов

Если у меня есть определение стиля в 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

Можно ли это вообще сделать?

10
задан Robert Koritnik 8 March 2012 в 14:46
поделиться