Sass .scss: Вложенность и несколько классов?

332

Я использую 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
Вы должны использовать двойной селектор класса. Эта проблема - прекрасный пример вложенности в Sass. Вы можете прочитать все об этом здесь kolosek.com/nesting-in-less-and-sass
Неша Зорич

Ответы:

571

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

Для вашего примера:

.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&выдаст ошибку.

Christoph
источник
12
Просто примечание, обычно используется &при использовании псевдоэлементов и псевдоклассов. Например: &:hover.
раздавить
1
@crush Ради полноты я добавил это в свой ответ. Спасибо за комментарий.
Кристоф
1
Спасибо. Я думал, что был глуп, поскольку это не упомянуто в руководстве по основам! Кстати, документы переместили URL на: sass-lang.com/documentation/…
scipilot
1
Если &используется в конце строки, она помещает эту строку в начало остальных классов на всех других уровнях. Вы можете комбинировать элементы, выполнив &.descunder .container, что добавит .desc к нему, в результате.container.desc
Кейт Миллер
scss-lint предлагает использовать "& :: hover" (двойные колоны)
Марсель Ланж,
18

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

Мердок Хелскрим
источник
обратите внимание, это звучит хорошо, но следует избегать любой ценой. Вы будете благодарить меня в будущем, когда попытаетесь найти свой проект .container--descи в итоге не получите результатов.
Ставм
2

Ответ Кристофа идеален. Однако иногда вы можете захотеть пройти больше занятий, чем один. В этом случае вы можете попробовать функции @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;
    }
}

user2299879
источник