Sass .scss: Гніздування та кілька класів?

Я використовую 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?

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

Для вашого прикладу:

.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&призведе до помилки.

Якщо це так, я думаю, що вам потрібно скористатися кращим способом створення імені класу або конвенції імені класу. Наприклад, як ви сказали, ви хочете, щоб у .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 - Методика блокових елементів модифікатора

Відповідь Крістофа ідеальна. Іноді, однак, ви можете ходити більше класів, ніж один. У цьому випадку ви можете спробувати @at-rootі#{} css, які дозволять двом кореневим класам сидіти поруч з використанням &.

Це не буде працювати (через nothing before &правило):

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

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

Але це (використовуючи @at-root plus #{&}):

container {
    background:red;
    color:white;
    
    @at-root .desc#{&} {
      background: blue;
    }

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