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

Ask ChatGPT
Set ChatGPT API key
Find your Secret API key in your ChatGPT User settings and paste it here to connect ChatGPT with your Tutor LMS website.
Scroll to Top