PIKADEMIA

Projekt edukacji alternatywnej

Szkielet do tworzenia projektu z SASS

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:css

Jeś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