Давайте представим, что у нас есть компонент card:
// Файл card.scss
.card {
// стили
}
И компонент container:
// Файл container.scss
.container {
// стили
}
Теперь нам нужно написать стили для card, который находится внутри container.
Тезис
Если мы пишем стили для компонента, то они должны находится в файле этого компонента.
В нашем случае это — card.
Пример
Воспользуемся селектором расширения SASS:
// Файл card.scss
.card {
// стили
%container & {
// еще стили
}
}
// Файл container.scss
.container {
@extend %container;
// стили
}
Здесь я для класса container задал одноименный extend.
А потом дописал стили в card.
Это скомпилируется примерно в такой css:
.card {
// стили
}
.container {
// стили
}
.container .card {
// стили
}
@extend я использовал для того чтобы была возможность быстро переименовать класс, но можно и без него.
Альтернативный пример
// Файл card.scss
.card {
// стили
.container & {
// еще стили
}
}
Минус этого подхода в том, что если класс container изменится, то его придется править в нескольких местах.
А плюс — не требуется использовать extend или sass.
Антипример
Иногда можно увидеть как разработчик пишет так:
// Файл container.scss
.container {
// стили
.card {
// еще стили
}
}
Это приводит к тому, что стили для card находятся в разных местах. И это становится большой проблемой, когда таких мест становится несколько:
// Файл container.scss
.container {
// стили
.card {
// еще стили
}
}
// Файл main.scss
.main {
// стили
.card {
// еще стили
}
}
// Файл wrapper.scss
.wrapper {
// стили
.card {
// еще стили
}
}
Еще демо можно посмотреть в кодпене.
