Как использовать @extend стилей из другого SCSS файла и есть ли в этом смысл?

Question

[Вера]

Добрый день!

Заранее прошу прощения если этот вопрос уже задавался, но, несмотря на обширное кол-во информации по теме, найти ответа на свой вопрос я не смогла.

Суть в следующем:
Например, у меня есть два отдельных scss файла - header.scss и footer.scss. Стили футера почти полностью совпадают со стилями хедера, за исключением пары свойств.
Но если я прописываю в файле footer.scss @extend header - стили хедера не могут использоваться, т.к. это другой файл.

Подскажите, как идеологически вернее делать в данной ситуации? Чтобы новый класс/элемент получал стили существующего класса из другого файла + добавлял свои или менял некоторые стили на свои.

Answer 1

[profesor08]

Потому что @extend не работает с файлами, а работает с уже существующими стилями.
https://sass-scss.ru/documentation/pravila_i_direk...

Comments

[Вера]

Спасибо за ссылку ))

Я понимаю почему не работает, вопрос состоит в том как при данной организации стилей (у каждого компонента - свой scss файл) сделать чтобы работало. И какой вариант наиболее идеологически верный, наиболее надежный что ли?

[profesor08]

Импортируй их, в чем проблема?

@import "blabla-0.scss";

$test-var: 2;

@if $test-var == 1 {
    @import "blabla-1.scss";
}

@if $test-var == 2 {
    @import "blabla-2.scss";
}