Как ссылаться на несколько подклассов на одном элементе с помощью SASS

Question

Я использую метод SMACSS для написания своего кода SCSS, и у меня есть подкласс, на который я хочу сослаться, если у него также есть другой подкласс.

HTML

<div class="parent-class parent-class-subclass1 parent-class-subclass2">

SCSS

.parent-class {
  &-subclass1.&-subclass2 {
    //Styles here
  }
}

Есть идеи, как я могу это сделать?

Answer 1

Итак, когда родительский элемент также имеет subclass1 && subclass2, применять стили?

@ katniss.everbean Да, но то, как ты это написал, заставляет тебя дублировать код.

После некоторого поиска я наткнулся на это решение, которое отлично работает, написав любые & ссылки после первого, такого как # {&}:

SASS

.parent-class {
  &#{&}-subclass1#{&}-subclass2{
        border: 1px solid red;
  }
}

Компилируется в (CSS)

.parent-class.parent-class-subclass1.parent-class-subclass2 {
  border: 1px solid red;
}

Я нашел это на странице SASS GitHub.

Answer 2

... и у меня есть подкласс, на который я хочу сослаться, если у него также есть другой подкласс.

Итак, когда родительский элемент также имеет subclass1 && subclass2, применять стили?

Вам нужен только один & присоединить вложенный селектор к родительскому классу в качестве родного брата. Затем запишите два подкласса как обычный селектор брата (рядом друг с другом без пробела, чтобы указать, что они оба являются обязательными классами брата).

SCSS будет выглядеть так:

.parent-class {
  //some styles
  &.parent-class-subclass1.parent-class-subclass2 {
    //subclass styles
  }
}

Это эквивалентно следующему CSS

.parent-class {
  //some styles
}

.parent-class.parent-class-subclass1.parent-class-subclass2 {
  //some other styles
}

Чтобы сохранить свою модульную структуру именования и не записывать полное имя подкласса, вы можете попробовать использовать селекторы подстановочных знаков. Я не уверен, что на самом деле это выглядит лучше, чем просто выписывание полного имени класса.

Вот кодекс, который демонстрирует:

http://codepen.io/anon/pen/vXKZYA

И основной код в этой ручке для потомков:

<div class="parent-class parent-class-subclass1 parent-class-subclass2">
  some text that has all the goods
</div>

.parent-class {
  color: #0000ff;
  &[class*="-subclass1"][class*="-subclass2"] {
    font-size: 20px;
    font-family: sans-serif;
  }
}

Answer 3

Ты должен сделать это так

<div class="parent-class subclass1 subclass2">

.parent-class {
  &.subclass1.subclass2 {
    //Styles here
  }
}

или вы можете даже сделать это так

.parent-class {
      &.subclass1 {
        //subclass1 Styles here
        &.subclass2 {
          //subclass1 & 2 Styles here
        }
      }
    }