Sass.scss: Nesting и несколько классов?

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

Следующий пример:

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 с помощью Sass?

Ответы

Ответ 1

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

В вашем примере:

.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&, чтобы вызвать ошибку.

Ответ 2

Если это так, я думаю, вам нужно использовать лучший способ создания имени класса или соглашения об имени класса. Например, как вы сказали, вы хотите, чтобы класс .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 - Методика модификатора элемента блока