Na początek tworzymy główny plik, np. style.scss lub main.scss i folder o nazwie, np: partials
Wewnątrz folderu partials będziemy dodawać poszczególne pliki składowe scss, np:
_index.scss
Dodajemy referencje do pozostałych plików w folderze, np:
@forward 'article';
@forward 'contact';
@forward 'footer';
@forward 'header';
@forward 'services';_header.scss
_article.scss
_main.scss
_footer.scss
itd..
W pliku głównym, np: style.scss dodajemy linię, która będzie pobierać kod z pliku index.scss , a tym samym ze wszystkich innych plików zadeklarowanych w index.scss.
Plik index.scss zostanie zaczytany automatycznie.
Używając as * pozbywamy się konieczności używania dodatkowych przedrostków
@use 'partials' as *;Teraz będziemy dodawać kod do poszczególnych plików wewnątrz folderu partials, a po kompilacji, wszystko zostanie zapisane w pliku style.css
Oczywiście, aby nasłuchiwać i kompilować na bieżąco pliki scss do css, używamy komendy
sass --watch scss:cssJeśli nie wiesz jak ustawić proces automatycznej kompilacji, zajrzyj tutaj: Jak zainstalować SASS z konsolą i node.js
Gotowy projekt strony startowej Simple Website Template z SASS możesz pobrać tutaj: https://drive.google.com/drive/folders/1VF7eqE0XnyvO-E1_SUJnQBB0LABB2SPl?usp=sharing