Почему не работают при компиляции стили?

Question

[hollanditkzn]

У меня такой вопрос, почему при раскрывающем строек, стили срабатывают вот так

.child.animate div {
  height: 2em;
  opacity: 1;
}

А скомпилированный сасс е работает

.child .animate div {
  height: 2em;
  opacity: 1;
}

Вот пример https://jsfiddle.net/hollanditkzn/x2bcukw7/18/
Если добавить пробел то ничего не работает?

Comments

[hollanditkzn]

?

[hollanditkzn]

Немного понял что там должно быть стили

.child.animate div {
  height: 2em;
  opacity: 1;
}

А у меня .child .animate div Если именно так как у меня показано, то не работает, почему-то

[Serj-One]

hollanditkzn, Что значит "почему-то"? Без пробела это два класса одного элемента, с пробелом - вложенность, классы родительского и дочернего.

[hollanditkzn]

Serj-One, А как в sass их сделать

.child {
  .animate{
    td {
      height: 2em;
      opacity: 1;
    } 
  }
}

Но получается что он выводит .child .animate div Вот так, а он не работает, работает если в сассе сделать так

.child.animate {
  td {
    height: 2em;
    opacity: 1;
  }
}

Я знаю что вложенность, просто почему первый случаи не работает, а второй случай работает

[Егор Живагин]

hollanditkzn,
первый случай : "внутри класса child , найди класс animate. Внутри класса animate, найди td. Стилизуй."
второй случай: "Внутри блока с классами child и animate, найди td. Стилизуй"

[Сергей delphinpro]

hollanditkzn, вы очень сумбурно изъясняетесь.

.child {
  &.animate{
    td {
      height: 2em;
      opacity: 1;
    } 
  }
}

Answer 1

[Максим]

чтоб скомпилоровалось так .child.animate div
в sass нужно писать вот так:

.child
  &.animate
    div
      color: red

а чтоб скомпилоровалось вот так .child .animate div
соответственно так:

.child
  .animate
    div
      color: red

тоесть символ амперсанд добавляет к верхней строке то что вы после него напишите, допустим такой год:

.child
  &_animate
    &__color
      color: red

станет таким

.child_animate__color {
  color: red
}

в scss тоже самое...