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

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.
-
node-sass
: odnosi się do pakietu node-sass. -
-watch
: opcjonalna flaga oznaczająca "monitoruj wszystkie pliki .scss w folderze scss/ i kompiluj je ponownie po każdej zmianie". -
scss
: nazwa folderu, w którym umieszczamy wszystkie pliki .scss. -
-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!
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.
Update me weeklyEnvato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!
Translate this post