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 с сассом?

 Nesha Zoric21 февр. 2018 г., 09:18
Вы должны использовать двойной селектор класса. Эта проблема является прекрасным примером вложенности в Sass. Вы можете прочитать все об этом здесьkolosek.com/nesting-in-less-and-sass

Ответы на вопрос(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;
}

The code above is based on BEM Methodology in class naming conventions. You can check this link: BEM — Block Element Modifier Methodology

Решение Вопроса

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

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

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

 10 нояб. 2016 г., 21:15
Приятно отметить это @crush
 01 дек. 2014 г., 19:30
Просто примечание, общее использование& это при использовании псевдоэлементов и псевдоклассов. Например:&:hover.
 01 дек. 2014 г., 23:34
@crush для полноты & apos; Ради, я добавил это в свой ответ. Спасибо за комментарий.
 01 авг. 2015 г., 08:51
Благодарю. Я думал, что был глуп, поскольку это не упомянуто в руководстве по основам! Кстати, документы переместили URL на:sass-lang.com/documentation/…
 23 авг. 2016 г., 23:41
Если& используется в конце строки, она помещает эту строку в начало остальных классов на всех других уровнях. Вы можете комбинировать элементы, делая&.desc под.container, который будет добавлять .desc к нему, в результате чего.container.desc

Ваш ответ на вопрос