Как изменять свойства другого класса при условии наличия класса у родителя?

Question

[Ispanec1998]

Есть элемент
<div class="main">

Как описать стиль main так, что если мы добавим в main класс red, что у других элементов меняется стиль?
Т.е. при условии мы меняем стили у block1 и block2
Описание стилей в SASS

.main
   .red
     .block1
       color: red
      .block2
       color: red

Comments

[Вадим]

Так, и сложность у Вас с...?

https://developer.mozilla.org/ru/docs/Web/CSS/CSS_...
https://developer.mozilla.org/ru/docs/Web/CSS/Chil...

[Ispanec1998]

Вадим,
Вроде писал по инструкции, но не работает

.main
  .block1
    display: none

  .block2
    display: none

  &.toggle
    .block1
      display: flex

    .block2
      display: flex

[Вадим]

Ispanec1998, а toggle у вас навешиваектся на main? точно?
Покажите скрин с девтулзов до и после, и какие стили применяются к .block1 до и после

[Вадим]

Ispanec1998, смогу глянуть если выложите на codepen.

Answer 1

[Сергей delphinpro]

.main {
  .block1 {
    color: blue;
  }
}
.main.red {
  .block1 {
    color: red;
  }
}

то же самое

.main {
  .block1 {
    color: blue;
  }
  &.red {
    .block1 {
      color: red;
    }
  }
}

Comments

[Ispanec1998]

Забыл уточнить в sass

[Сергей delphinpro]

Ispanec1998, Это и было в sass O_o

[Ispanec1998]

Сергей delphinpro,
Блок не становится видимым при добавлении toggle

.main
  .block1
    display: none

  .block2
    display: none

  &.toggle
    .block1
      display: flex

    .block2
      display: flex

[Сергей delphinpro]

Ispanec1998, мне кому верить - вам или браузеру?

[Ispanec1998]

Сергей delphinpro, https://jsfiddle.net/ujwdqn12/3/

.main
  .list
     display: none
     color: red
   &.toggle
     .list
       display: block
       color: green

[Сергей delphinpro]

Ispanec1998, вы же в курсе, что фиддл не работает больше в России?

[Ispanec1998]

Сергей delphinpro, как зафиксировать, что я зашел на него из России?

[Сергей delphinpro]

Ispanec1998, ну, видимо, были не в курсе. Теперь знаете.