Привет, ребят. Подскажите пожалуйста как быть.
Есть блок .button у него есть модификатор .button--iconed и есть ещё один модификатор .button--bordered. Но есть ещё модификаторы цвета которые не знают на каких элементах менять цвета, .button--color--red .button--color--green, как написать селектор, чтобы цвет знал что у кнопки с рамкой нужно поменять цвет рамки, а у кнопки с иконкой поменять цвет фона и т.д.
Если цветовые модификаторы должны вести себя по-разному для разных элементов, придется их описывать для каждого конкретного случая, как-то так:
.button {
&--iconed {
&.button--color-red {
background-color: red;
}
}
&--bordered {
&.button--color-red {
border-color: red;
}
}
}