Advertisement
  1. Web Design
  2. Sass
Webdesign

Monitoruj i skompiluj Sass w pięciu prostych krokach

by
Difficulty:IntermediateLength:ShortLanguages:

Polish (Polski) translation by Mateusz Kurlit (you can also view the original English article)

Final product image
What You'll Be Creating

Sass jest prawdopodobnie najbardziej popularnym preprocesorem CSS; od lat pomaga nam pisać przejrzysty i modularny kod CSS do wielokrotnego użytku. W tym krótkim poradniku, przejdę od razu do rzeczy, które są ważne i wyjaśnię jak skompilować Sass do CSS za pomocą wiersza poleceń.

1. Zainstaluj Node.js

Aby skompilować Sass w wierszu poleceń, najpierw zainstaluj node.js. Pobierz go z oficjalnej strony internetowej nodejs.org, otwórz plik i przejdź przez konfigurator.

2. Zainicjuj NPM

NPM jest menedżerem pakietów Node dla JavaScript. NPM ułatwia instalację i deinstalację pakietów firm trzecich. Aby zainicjować projekt Sass za pomocą NPM, otwórz terminal i przejdź do projektu wpisując CD (zmiana katalogu).

Navigating to SASS-tutorial folder
Przejście do folderu projektu Sass

Po otwarciu właściwego folderu, uruchom polecenie npm init. Zostaniesz poproszony o odpowiedź na kilka pytań na temat projektu, po których NPM wygeneruje plik package.json w folderze.

packagejson

3. Zainstaluj Node-Sass

Node-sass jest pakietem NPM, który kompiluje Sass do CSS (robi to bardzo szybko). Aby zainstalować node-sass, uruchom następujące polecenie w terminalu: npm install node-sass

4. Napisz polecenie Node-Sass

Wszystko jest gotowe do napisania krótkiego skryptu w celu skompilowania Sass. Otwórz plik package.json w edytorze kodu. Zobaczysz coś takiego:

W sekcji script pod poleceniem test, dodaj polecenie css jak pokazano poniżej:

Przejdźmy przez ten wiersz słowo po słowie.

  1. node-sass: odnosi się do pakietu node-sass.
  2. -watch: opcjonalna flaga oznaczająca "monitoruj wszystkie pliki .scss w folderze scss/ i kompiluj je ponownie po każdej zmianie".
  3. scss: nazwa folderu, w którym umieszczamy wszystkie pliki .scss.
  4. -o css: folder wyjściowy dla skompilowanego kodu CSS.

Gdy uruchomimy ten skrypt, będzie on monitorował każdy plik .scss w folderze scss/, następnie zapisze skompilowany kod css w folderze css/ po każdej zmianie w pliku .scss.

5. Uruchom skrypt

Aby wykonać nasz jednowierszowy skrypt, musimy uruchomić następujące polecenie w terminalu: npm run scss

Gotowe! Monitorujemy i skompilujemy kod SASS.

Krótkie wskazówki na temat Sass

Oczekuj więcej krótkich wskazówek na temat Sass; będzie ich cala kolekcja!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.