Sass yra galingas CSS plėtinys, kuris leidžia jums lengviau ir efektyviau tvarkyti savo stilių lapus. Norint naudoti Sass failus, juos reikia konvertuoti į paprastus CSS failus. Šiame vadove mes parodome, kaip efektyviai organizuoti Sass kompiliavimą į CSS naudojant paprastus komandas ir automatizacijas.
Pagrindinės išvados
- Sass turi būti konvertuojamas į CSSFailus, kad būtų galima jį naudoti.
- Naudodamas stebėjimo komandą, gali automatiškai sekti pokyčius Sass failuose ir konvertuoti juos į CSS failus.
- Gera failų struktūra yra būtina, norint efektyviai dirbti su Sass ir CSS.
Žingsnis po žingsnio instrukcija
1. Pradinė Sass konvertavimas į CSS
Pirmiausia turite įsitikinti, kad esate tinkamame kataloge, kuriame yra jūsų Sass failas. Pavyzdžiui, jei jūsų failas yra kataloge "C:\tutkit", pereikite į šią vietą.
Norėdami tai padaryti, atidarykite savo terminalą ir įveskite šią komandą, kur jūsųFailas.scss yra jūsų Sass failo pavadinimas, o jūsųIšėjimoFailas.css yra norimo CSS išėjimo failo pavadinimas:
sass jūsųFailas.scss jūsųIšėjimoFailas.css
Ši komanda konvertuoja Sass failą į atitinkamą CSS failą. Atkreipkite dėmesį, kad failų pavadinimai neturi sutapti. Galite pavadinti išėjimo failą pagal savo norus.
2. Automatizuotas kompiliavimas
Norėdami kiekvieną kartą neįvesti konvertavimo komandos rankiniu būdu, galite naudoti stebėjimo komandą. Ši komanda stebi Sass failą ir automatiškai atlieka konversiją, kai atliekami pakeitimai.
Įveskite šią komandą, kad įjungtumėte stebėjimą:
sass --watch jūsųFailas.scss: jūsųIšėjimoFailas.css
Kai tai padarysite, pamatysite patvirtinimą, kad stebėjimas buvo pradėtas. Dabar kiekvieną kartą, kai atliksite pakeitimų savo Sass faile, CSS failas bus automatiškai atnaujinamas.
3. Daugiau failų stebėjimas
Tarkime, dirbate su keliais Sass failais kataloge. Tokiu atveju naudinga stebėti visą katalogą. Pirmiausia pereikite nuo savo dabartinio katalogo ir įveskite šią komandą:
sass --watch tutkit/scss: tutkit/css
Ši komanda dabar stebi visą scss katalogą ir konvertuoja visus pakeitimus į atitinkamus failus css kataloge.
4. Sisteminė struktūra jūsų Sass failams
Norėdami išlaikyti tvarką savo projekte, turėtumėte sukurti aiškią katalogų struktūrą. Sukurkite scss katalogą savo Sass failams ir atskirą css katalogą išėjimo failams. Tai palengvins priežiūrą ir užtikrins, kad viskas būtų tvarkinga.
Todėl pirmiausia sukursime savo katalogą:
Sukurkite naują katalogą pavadinimu scss:
mkdir scss
Ir dar vieną katalogą pavadinimu css:
mkdir css
Dabar galite laikyti visus savo Sass failus scss kataloge ir rašyti sugeneruotus CSS failus į css katalogą.
5. Automatizuota katalogų stebėjimas
Kai jūsų katalogai yra nustatyti, galite nurodyti SAS stebėti visus pakeitimus jūsų scss kataloge ir atnaujinti atitinkamus CSS failus. Naudokite šią komandą:
sass --watch scss:css
Dabar SAS stebės, ar įvyko pakeitimai scss kataloge, ir automatiškai sukurs arba atnaujins atitinkamus CSS failus css kataloge.
Santrauka – Įgudusi Sass konvertavimas į CSS
Automatizuodami Sass kompiliavimą, galite sutaupyti laiko naudodami aiškią ir apgalvotą aplankų struktūrą ir pasiruošdami naudojant stebėjimo komandą, kad pakeitimai būtų nedelsiant taikomi. Taip nuolat būsite tikri, kad jūsų naujausi pakeitimai taip pat atsispindės CSS faile.
Dažnai užduodami klausimai
Kaip veikia stebėjimo komanda Sass?Stebėjimo komanda stebi vieną ar kelis Sass failus ar katalogus, kad automatiškai atpažintų pakeitimus ir juos konvertuotų į CSS failus.
Ar galiu turėti kelis Sass failus viename kataloge?Taip, galite turėti kelis Sass failus viename kataloge, o stebėjimo komanda gali būti sukonfigūruota, kad stebėtų visus failus šiame kataloge.
Ar Sass failo pavadinimas turi atitikti CSS failo pavadinimą?Ne, pavadinimai neturi atitikti; galite išėjimo failą pavadinti savo pasirinkimu.
Ar būtina kiekvieną kartą rankiniu būdu kompiloti Sass?Ne, stebėjimo komanda pašalina poreikį rankiniu būdu kompiloti, automatiškai atpažindama pakeitimus ir perimdama kompiliacijos procesą.
