Нестинг разных элементов в одном одинаковом?

Question

[art style]

Как выглядит нестинг если у меня есть много одинаковых элементов в котором лежат другие разные элементы?
Допустим это одинаковая кнопка с одинаковыми стилями а внутри лежат разные иконки font awesome и разный текст?

Comments

[art style]

ну что никто не знает? или не понимает сути?

div
-div.btn1>div.icon1
-div.btn1>div.icon2
-div.btn1>div.icon3
-div.btn1>div.icon3
/div

как будет выглядеть такой нестинг?

[G F]

Непонятно формулируешь. Просто накидай хтмл структуру и скажи какие элементы ты хочешь стилизовать.

[art style]

G F, накидал уже выше.
как эту структуру писать в sass?

.btn1 {
    background-color: red;
    .icon1 {
    background-color:lime;
    }
}
.btn1 {
    background-color: red;
    .icon2 {
    background-color: white;
    }
}
.btn1 {
    background-color: red;
    .icon3 {
    background-color: black;
    }
}

так чтоли записывать? так это не правильно нефига...

Answer 1

[G F]

.btn1 {
  & .icon1 {}
  & .icon2 {}
  & .icon3 {}
}

Можно так

.btn1 {
  & > .icon1 {}
  & > .icon2 {}
  & > .icon3 {}
}