Kes on kunagi puhtas CSS-is stiile kirjutanud, teab seda valu: sadu ridu, pesastatud selektoreid, korduvaid värve ja meediapäringuid, mis on failis suvaliselt laiali. Muutujad? Miksinid? Pesastamine? Tavalises CSS-is tähendab see kas kohandatud atribuutidega trikitamist või järgmise spetsifikatsiooni mustandi ootamist.

SASS on neid probleeme lahendanud juba poolteist aastakümmet. Kuid lihtsalt SASS-is kirjutamisest ei piisa, kood peab ilma lisavaevata automaatselt muutuma minifitseeritud, tootmisvalmis CSS-iks. Atom editor, mille jaoks plugin sass-autocompile kunagi loodi, suleti ametlikult 2022. aasta detsembris. Pluginad ise surid koos sellega.

Õnneks on tööriistad ainult paremaks läinud. Selles artiklis tutvustame 2026. aastaks asjakohast meetodit kompileerimise ja minifitseerimise seadistamiseks nii, et see lihtsalt töötab: ilma Atomita, ilma häkkideta, ükskõik millises editoris.

💡 Kiirülevaade:

• Paigalda Dart Sass CLI, ametlik SASS-i implementatsioon
• Käivita sass --watch automaatseks kompileerimiseks salvestamisel
• Lisa --style=compressed minifitseerimiseks käigu pealt
• Peenema optimeerimise jaoks lisa cssnano või Lightning CSS
• Alternatiivina kasuta VS Code'is Live Sass Compilerit

Miks SASS-i kompileerida: brauserid ei mõista.scss faile

Brauserid vajavad tavalist .css-i. Punkt. Iga kord, kui muudad muutujat või miksinit, on vaja kompileerimise sammu. Käsitsi sass input.scss output.css käivitamine pärast iga salvestamist on tee põrgusse. Eriti kui faile on kümneid ja projekt on kokku pandud osadest _partial.scss.

Automaatne kompileerimine salvestamisel on tööstusharu standard. Täna teostatakse seda Dart Sass-is sõna otseses mõttes ühe käsuga. Pluss minifitseerimine samas voos: väljund pole lihtsalt .css, vaid kohe .min.css, valmis juurutamiseks.

Allpool on kolm seadistustaset: CLI iga editori jaoks, VS Code'i integratsioon ja täiustatud minifitseerimine järelprotsessoritega.

Meetod 1: Dart Sass CLI, universaalne lähenemine

Dart Sass on ametlik viide SASS-i implementatsioon, kirjutatud Dartis. Alates 2020. aastast on see täielikult asendanud aegunud Ruby Sassi ja LibSassi/node-sassi. Praegune versioon 2026. aasta juuni seisuga on 1.101.0.

Paigaldamine

Lihtsaim viis on globaalselt npm-i kaudu:

1
npm install -g sass

Kontrolli, et kõik oleks paigaldatud:

1
sass --version

Alternatiivid: choco install sass (Windows, Chocolatey), brew install sass/sass/sass (macOS, Homebrew) või otsearhiiv GitHubist, ilma väliste sõltuvusteta, lihtsalt paki lahti ja lisa PATH-i.

Põhiline kompileerimine

Kompileeri fail käsitsi:

1
sass styles/main.scss dist/main.css

Kuid tegelik võimsus peitub jälgimisrežiimis. See jälgib lähtefailide muutusi ja kompileerib automaatselt ümber:

1
sass --watch styles/:dist/

See on kõik. Redigeerid faili _buttons.scss, Dart Sass ehitab main.css kohe ümber. Pole vaja redaktori pluginaid ega surnud Atom-i pakette. Töötab igas redaktoris ja CI-s.

Minifitseerimine lennult

Lipp --style=compressed eemaldab tühikud, reavahetused ja kommentaarid. Väljund on tootmisvalmis .min.css:

1
sass --watch styles/:dist/ --style=compressed

Enamiku projektide jaoks on see piisav. Dart Sass compressed eemaldab kõik ebavajaliku, fail muutub lähtekoodist märgatavalt kergemaks. Kui vajad kirurgilist täpsust, vaata allpool cssnano jaotist.

Projekti struktuur osalistega (partials)

Tüüpiline projekt pannakse kokku kümnetest osalistest, failidest _ eesliitega, mida SASS eraldi ei kompileeri, vaid lisab põhifaili @use abil:

1
// main.scss
2
@use 'variables';
3
@use 'mixins';
4
@use 'header';
5
@use 'footer';

Dart Sass jälgib kogu sõltuvusahelat. Muudad faili _variables.scss, main.css ehitatakse ümber. Muudad osalist, mis on teise osalise sees, käivitab see ikka ümberehituse. @use ja @forward maagiat kirjeldab ametlik dokumentatsioon.

Meetod 2: VS Code + Live Sass Compiler, kompileerimine ilma konsoolita

Kui konsool pole sinu igapäevane tööriist, on VS Code'il olemas Live Sass Compiler Glenn Marksilt. Laiendusel on 2,65 miljonit installimist ja see asendab igapäevases küljendustöös CLI lähenemise täielikult.

Mida see teeb:

• Reaalajas kompileerimine .scss → .css igal salvestamisel (Ctrl+S)
• Väljundstiili valik: expanded (loetav) või compressed (minifitseeritud)
• Automaatsed eesliited seadete kaudu
• Seadistatav väljundkaust ja laiend (.css või .min.css)
• Kaustade jälgimisest väljaarvamine (node_modules, dist)
• Kiire sisse/välja lülitamine olekuribalt

Paigaldamine: Ctrl+P → ext install glenn2223.live-sass → all olekuribale ilmub nupp Watch Sass. Klõpsa sellel ja kõik projekti .scss failid kompileeritakse salvestamisel automaatselt.

Erinevalt CLI-st ei pea sa meeles pidama sisend- ja väljundkaustade teekondi, laiendus arvutab need failistruktuuri põhjal. Puudus: töötab ainult VS Code'is, mitte CI-s.

Meetod 3: Täiustatud minifitseerimine, cssnano ja Lightning CSS

Sisseehitatud --style=compressed teeb põhilise minifitseerimise: eemaldab tühikud ja kommentaarid. Kuid see ei optimeeri CSS-i reeglite tasemel. Siin tulevad mängu järeltöötlejad.

Cssnano

cssnano on npm-i ökosüsteemi populaarseim CSS-i minifitseerija, mis on ehitatud PostCSS-i peale. See teeb seda, mida Dart Sass ei suuda:

• Koondab identsed reeglid üheks
• Eemaldab korduvad @import-id
• Lühendab hex-värve (#ffffff → #fff)
• Teisendab ajaväärtusi (0.5s → .5s)
• Eemaldab tühjad @media-d ja kommentaarid
• Liidab külgnevad reeglid identsete selektoritega

cssnano töötab pärast SASS-i kompileerimist, valmis .css faili peal. Tüüpiline ahel: SASS-i kompileerimine → PostCSS koos automaatsete eesliidetega → cssnano:

1
sass styles/:dist/ && postcss dist/*.css --use autoprefixer cssnano -d dist/

Mittekriitiliste projektide puhul ei ole see lisakoormus õigustatud. Tootmiskeskkonnas, kus on 100 000+ kasutajat, korrutab iga säästetud sada baiti liiklusega.

Lightning CSS

Lightning CSS on Rustis kirjutatud minifitseerija Parceli meeskonnalt. Positsioneeritud kui „100 korda kiirem kui PostCSS" ja sisemiste testide järgi töötleb see ühel lõimel üle 2,7 miljoni koodirea sekundis. Lisaks minifitseerimisele suudab see:

• Transpileerida kaasaegse CSS-i ühilduvaks (CSS Nesting → lamedad selektorid)
• Lisada automaatselt eesliiteid browserslist-i kaudu
• Lühendada rgba() ja hsla() tänapäevastele vormingutele

Puuduseks on suhteline noorus ja väiksem pluginate ökosüsteem võrreldes PostCSS-iga. Uue projekti puhul aastal 2026 tasub sellele vähemalt pilk peale visata.

Videos on 90-minutiline Sass Crash Course Traversy Medialt: alates Dart Sassi paigaldamisest ja SCSS-i süntaksist kuni muutujate, miksinite, @use/@forward ja failikorralduseni. Kõik näited on ajakohased ja töötavad aastal 2026.

⁉️🤔 Korduma kippuvad küsimused

node-sass viskab installimisel vea, mida teha?

node-sass kuulutati ametlikult aegunuks 2020. aasta oktoobris. Paigalda Dart Sass: npm install -g sass. Sama sass API, kuid ilma binaarprobleemideta Windowsis ning ilma Pythoni/Visual C++ sõltuvusteta. Kõik kaasaegsed projektid kasutavad Dart Sassi.

Live Sass Compiler ei näe minu SCSS-faile, milles asi?

Kontrolli, et lähtefaile pole seadetes välistatud. F1 → Live Sass: Watch Sass peaks olekureal näitama „Watching". Kui ei, siis kontrolli liveSassCompile.settings.partialsList failis .vscode/settings.json: vaikimisi osifaile /**/_*.s[ac]ss eraldi ei kompileerita, see on normaalne.

Kas ma võin ühes projektis SASS-i teiste eeltöötlejatega segada?

Tehniliselt jah, .scss ja .less failid võivad kõrvuti eksisteerida. Praktiliselt ära tee seda. Erinevatel eeltöötlejatel on erinev mixinate ja muutujate süntaks, redaktori pluginad lähevad konflikti ja uued meeskonnaliikmed satuvad segadusse. Vali üks: 2026. aastal on selleks valdava enamuse projektide puhul SASS (SCSS süntaks).

Kas mul on cssnano vaja, kui kasutan juba --style=compressed?

Tüüpilise WordPressi saidi või maandumislehe puhul ei ole. --style=compressed annab peaaegu kogu vajaliku tulemuse. cssnano on mõttekas lisada siis, kui iga kilobait loeb: suure liiklusega projektid, progressiivsed veebirakendused, mobiilsed veebirakendused, kus jälgitakse Core Web Vitals mõõdikuid.

Atom Editor on suletud, kuhu ma oma SASS-i kompileerimise seaded migreerin?

Kood ja stiilid ei ole SASS-i kompilaatoriga seotud. .scss failid ise ja projektistruktuur ei sõltu redaktorist. Teisalda projektikaust VS Code'i (code .), paigalda Live Sass Compiler ja jätka tööd. Või lihtsalt käivita terminalis sass --watch, see töötab samamoodi VS Code'is, WebStormis, Sublime'is ja isegi Notepadis.

Millist tööriista oma ülesande jaoks valida

Kolm taset, kolm stsenaariumi. Vali oma valu, mitte kellegi teise õpetusest pärit stacki järgi.

Ainult küljendus, CI/CD puudub. Paigalda VS Code'is Live Sass Compiler. Pole vaja konsooli, paar klõpsu ja töötab. Arenduseks expanded, enne juurutamist compressed. 2,65 miljonit installimist ei valeta.

Meeskonnatöö, CI, backend-arendajad läheduses. Dart Sass CLI lipuga --watch ja --style=compressed. Üks käsk package.json skriptis ja kõigil on sama käitumine, Macist Linuxi serverini. Redaktorist sõltuvus puudub.

Tootmine publikuga. Lisa cssnano PostCSS ahelasse või proovi Lightning CSS-i. Kokkuhoid puhta --style=compressed suhtes tuhandete päringute kohta tunnis tähendab megabaite ja millisekundeid mõõdikutes.

SASS kui keel on elus ja domineeriv. Atom on surnud. Kompileerimise tööriistad on muutunud lihtsamaks, mitte keerulisemaks: Dart Sass CLI katab praktiliselt kõik stsenaariumid ilma pluginateta ja graafiliste seadeteta. Proovi sass --watch kohe, see võtab 30 sekundit.