Advertisement
  1. Web Design
  2. Sass

Monitoruj i skompiluj Sass w pięciu prostych krokach

Scroll to top
Read Time: 2 min

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

Final product imageFinal product imageFinal 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 folderNavigating to SASS-tutorial folderNavigating 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.

packagejsonpackagejsonpackagejson

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
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
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.