Лучший способ расширить класс SASS с помощью внутреннего селектора (подкласса)

Question

Я отображаю следующие HTML для отображения сообщений:

  <div className="message">
    <div className="message_label">
      A message
    </div>
  </div>

Используя следующий класс S CSS:

  .message {
    margin: 10px;
    border-radius: 10px;
    border: 3px solid lightblue;
    &_label {
      color: #444;
      padding: 5px;
    }
  }

Следуя БЭМ, я хочу создать еще один модификатор версия для сообщений об ошибках:

  <div className="message--error">
    <div className="message_label">
      This is an error!
    </div>
  </div>

Эта версия просто изменит предыдущие цвета на red, поэтому я хочу расширить предыдущий класс S CSS:

  .message {
    margin: 10px;
    border-radius: 10px;
    border: 3px solid lightblue;
    &_label {
      color: #444;
      padding: 5px;
    }

    &--error {
      @extend .message;
      border: 3px solid red;
      &_label {
        color: red; // This is not working
      }
    }
  }

Но селектор message_label не работает, поскольку его внутренний селектор и @extend не влияют на него, как объяснено в S CSS Docs . Какой лучший способ расширить класс, включая внутренний селектор?

Здесь вы можете проверить DEMO .

Answer 1

Причина, по которой это не работает, заключается в том, что все, что делает @extend, это разделяет некоторые свойства css между различными классами. Так что в этом случае я бы ожидал, что он создаст селектор типа:

.message, .message--error {
    margin: 10px;
    border-radius: 10px;
    border: 3px solid lightblue;
  }

  .message_label {
    color: #444;
    padding: 5px;
  }

  .message--error {
    border: 3px solid red;
  }

  .message--error_label {
    color: red;
  }

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

Наконец, пожалуйста, не форматируйте ваш s css как этот. Поддерживать и понимать было бы кошмаром.

Ответ

Мое предложение ответить на ваш вопрос - просто использовать .message и .message--error на одном и том же элементе , аналогично тому, как Bootstrap делает вещи