Дерзость.scss: вложенность и несколько классов?

Я использую Sass (.СКС) для моего текущего проекта.

пример:

HTML-код

<div class="container desc">
    <div class="hello">
        Hello World
    </div>
</div>

SCSS

.container {
    background:red;
    color:white;

    .hello {
        padding-left:50px;
    }
}

это прекрасно работает.

могу ли я обрабатывать несколько классов при использовании вложенных стилей.

в приведенном выше примере я говорю об этом:

в CSS

.container.desc {
    background:blue;
}

в этом случае все div.container обычно red но div.container.desc будет синим.

как я могу вложить это внутрь container С Сасс?

237
sass

2 ответов

можно использовать Родительский селектор ссылка &, он будет заменен родительским селектором после компиляции:

для примера:

.container {
    background:red;
    &.desc{
       background:blue;
    }
}

/* compiles to: */
.container {
    background: red;
}
.container.desc {
    background: blue;
}

на & полностью разрешится, поэтому, если ваш родительский селектор вложен сам, вложенность будет разрешена перед заменой &.

этот способ чаще всего используется для записи псевдо-элементы и -классы:

.element{
    &:hover{ ... }
    &:nth-child(1){ ... }
}

тем не менее, вы можете разместить & практически в любом положении вам нравится*, так что возможно и следующее:

.container {
    background:red;
    #id &{
       background:blue;
    }
}

/* compiles to: */
.container {
    background: red;
}
#id .container {
    background: blue;
}

однако имейте в виду, что это каким-то образом нарушает вашу структуру вложенности и, таким образом, может увеличить усилия по поиску конкретного правила в вашей таблице стилей.

*: никакие другие символы, кроме пробелов, не допускаются перед &. Таким образом, вы не можете сделать прямую конкатенацию selector+& - #id& выдаст ошибку.

448

Если это так, я думаю, вам нужно использовать лучший способ создания имени класса или Соглашения об имени класса. Например, как вы сказали, вы хотите .container класс для того чтобы иметь различный цвет согласно специфическим использованию или возникновению. Вы можете сделать это:

SCSS

.container {
  background: red;

  &--desc {
    background: blue;
  }

  // or you can do a more specific name
  &--blue {
    background: blue;
  }

  &--red {
    background: red;
  }
}

в CSS

.container {
  background: red;
}

.container--desc {
  background: blue;
}

.container--blue {
  background: blue;
}

.container--red {
  background: red;
}

приведенный выше код основан на методологии BEM в соглашениях об именах классов. Вы можете проверить эту ссылку: методология модификатора элементов BEM - Block

5