Повторное использование стилей в SASS / SCSS без слияния селекторов - PullRequest
Новая
       22

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

9 голосов
/ 08 марта 2012

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

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

1 Ответ

13 голосов
/ 08 марта 2012

Не могли бы вы использовать @mixin? 

// Define here
@mixin generic-error {
  // Error styling
}

// Replace original
.notification {
  &.error {
    @include generic-error;
  }
}
...