Monitoruj i skompiluj Sass w pięciu prostych krokach

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).

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.

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:

{
  "name": "sass-tutorial",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

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

"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "scss": "node-sass -watch scss -o css"
}

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!