Выберите родительский селектор в SASS / SCSS - PullRequest
Новая
       45

Выберите родительский селектор в SASS / SCSS

0 голосов
/ 19 февраля 2020

У меня небольшое недоразумение в синтаксисе S CSS. Создание небольшого компонента с использованием методологии БЭМ и проблема в S CSS. HTML: 

<div class="message message--success">
        <div class="message__title">
          BEM Example
        </div>
        <div class="message__content">
          <p>BEM Example text</p>
        </div>
      </div>

S CSS: 

.message {
  display: block;
  width: 300px;
  border-radius: 5px;
  border: 2px solid #000;
  padding: 10px;

  &__title {
    font-size: 18px;
    line-height: 1;
    color: #000;
    margin-bottom: 10px;
  }

  &__content {
    font-size: 15px;
    color: #000;
  }

  &--success {
    border-color: #3f9442;

    &__title {
      color: #3f9442;
    }

    &__content {
      color: #3f9442;
    }
  }
}

Как видите, у меня есть .message - успех класс и внутри & - -Поддержка прямых стилей (border-color) работает, но Stylyng для заголовка и содержимого не Как выбрать .message * в качестве родительского для ** & __ title и & __ content внутри & - success

Ответы [ 2 ]

2 голосов
/ 19 февраля 2020

Либо вы пишете оба селектора с полным именем класса (без использования &), либо вы можете сохранить ссылку на класс .message и использовать ее во вложенном селекторе 

.message {

  display: block;
  width: 300px;
  border-radius: 5px;
  border: 2px solid #000;
  padding: 10px;

  $this: &; /* reference to the .message class */

  &__title {
    font-size: 18px;
    line-height: 1;
    color: #000;
    margin-bottom: 10px;
  }

  &__content {
    font-size: 15px;
    color: #000;
  }

  &--success {
    border-color: #3f9442;

    /* use the reference stored */

    #{$this}__title {
      color: #3f9442;
    }

    #{$this}__content {
      color: #3f9442;
    }
  }
}
1 голос
/ 19 февраля 2020

Попробуйте вот так 

.message {
  display: block;
  width: 300px;
  border-radius: 5px;
  border: 2px solid #000;
  padding: 10px;

  &__title {
    font-size: 18px;
    line-height: 1;
    color: #000;
    margin-bottom: 10px;
  }

  &__content {
    font-size: 15px;
    color: #000;
  }

  &--success {
    border-color: #3f9442;
    .message{
      &__title {
        color: #3f9442;
      }

      &__content {
        color: #3f9442;
      }
    }
  }
}

https://jsfiddle.net/lalji1051/21b3cksm/4/

...