Sass on CSS võimas täiendus, mis võimaldab sul oma stiililehti lihtsamalt ja efektiivsemalt hallata. Kuid Selleks, et Sass-faile kasutada, tuleb need muuta tavalisteks CSS-failideks. Selles juhendis näitame, kuidas saate Sass'i kompileerimise CSS-ks teha lihtsate käskude ja automatiseerimisega efektiivselt.
Olulisemad järeldused
- Sass tuleb muuta CSS-failideks, et neid saaks kasutada.
- Watch-käsk võimaldab sul jälgida muudatusi Sass-failides ja muuta need automaatselt CSS-failideks.
- Hea failistruktuur on hädavajalik, et töötada efektiivselt Sass'i ja CSS'iga.
Samm-sammult juhend
1. Sass'i algne konverteerimine CSS-iks
Esiteks pead sa veenduma, et oled õiges kataloogis, kus sinu Sass-fail asub. Näiteks, kui sinu fail asub kataloogis "C:\tutkit", liigu sinna.
Selleks avada oma terminal ja sisesta järgmine käsk, kus sinuFail.scss on sinu Sass-faili nimi ja sinuVäljundFail.css on soovitud CSS-väljundfaili nimi:
sass sinuFail.scss sinuVäljundFail.css
See käsk konverteerib Sass-faili vastavaks CSS-failiks. Pane tähele, et failide nimed ei pea olema identsed. Sa saad väljundfaili nimetada vastavalt oma soovidele.
2. Kompileerimise automatiseerimine
Kuna sa ei pea iga kord käsitsi muutmiskäsku sisse kirjutama, saad kasutada Watch-käsku. See käsk jälgib Sass-faili ja viib automaatselt läbi konverteerimise, kui muudetakse.
Aktiveeri jälgimiseks järgnev käsk:
sass --watch sinuFail.scss:sinuVäljundFail.css
Kui sa nii teed, näed sa kinnitust, et jälgimine on käivitunud. Nüüd iga kord, kui muudad oma Sass-faili, värskendatakse CSS-faili automaatselt.
3. Mitmete failide jälgimine
Oletame, et töötad mitme Sass-failiga ühes kataloogis. Sellisel juhul on kasulik jälgida kogu katalooge. Esiteks, liigu oma praegusest kataloogist välja ja sisesta järgmine käsk:
sass --watch tutkit/scss: tutkit/css
See käsk jälgib nüüd kogu scss-katalooge ja muudab kõik muudatused vastavates failides css-kataloogis.
4. Oma Sass-failide organiseerimine
Et hoida oma projektis korda, peaksid sa looma selge kataloogistruktuuri. Loo scss-kataloog oma Sass-failide jaoks ja eraldi css-kataloog väljundfailide jaoks. See lihtsustab hooldust ja tagab, et kõik püsib organiseerituna.
Lähme ja loome esmalt oma katalooge:
Loo uus kataloog nimega scss:
mkdir scss
Ja veel üks kataloog nimega css:
mkdir css
Nüüd saad sa kõik oma Sass-failid jagada scss-katalooge ja genereeritud CSS-failid kirjutada css-katalooge.
5. Kataloogide automatiseeritud jälgimine
Kui sinu kataloogid on seadistatud, saad sa SAS'ile käskida jälgida kõiki muudatusi sinu scss-kataloogis ja värskendada vastavaid CSS-faile. Kasuta järgmist käsku:
sass --watch scss:css
Nüüd jälgib SAS, kas scss-kataloogis toimub muudatusi ja loob või värskendab automaatselt vastavaid CSS-faile css-katalooge.
Kokkuvõte – Kogenud Sass'i kompileerimine CSS-ks
Sass'i kompileerimise automatiseerimisega saad sa aega kokku hoida, kasutades selget ja läbimõeldud kaustastruktuuri ning rakendades Watch-käsku, et muudatused kohe rakenduksid. Nii saad alati kindel olla, et sinu viimased muudatused kajastuvad ka CSS-failis.
Korduma kippuvad küsimused
Kuidas töötab Watch-käsk Sass'is?Watch-käsk jälgib ühte või mitut Sass-faili või katalooge, et automaatselt tuvastada muudatusi ja kompileerida need CSS-failideks.
Kas ma saan ühes kataloogis olla mitu Sass-faili?Jah, sa saad ühes kataloogis olla mitu Sass-faili, ja Watch-käsku saab konfigureerida kõigi failide jälgimiseks selles kataloogis.
Kas Sass-faili nimi peab olema sama mis CSS-faili nomen?Ei, nimed ei pea olema identsed; sa saad väljundfaili nimetada vastavalt oma soovidele.
Kas on vajalik Sass iga kord käsitsi kompileerida?Ei, Watch-käsk muudab käsitsi kompileerimise üleliigseks, tuvastades automaatselt muudatused ja viies läbi kompileerimise.
