Sass ir jaudīga CSS paplašinājums, kas ļauj vieglāk un efektīvāk pārvaldīt jūsu stilus. Tomēr, lai izmantotu Sass failus, tos ir jāpārvērš par parastiem CSS failiem. Šajā pamācībā mēs parādīsim, kā efektīvi veikt Sass uz CSS kompilāciju, izmantojot vienkāršus komandas un automatizācijas.
Galvenie secinājumi
- Sass jātransforms par CSS failiem, lai tas būtu lietojams.
- Ar Watch komandu vari automātiski sekot izmaiņām Sass failos un pārvērst tos CSS failos.
- Laba failu struktūra ir izšķiroša, lai efektīvi strādātu ar Sass un CSS.
Solī pa solim instrukcija
1. Sākotnējā Sass pārvēršana par CSS
Pirmais solis ir nodrošināt, ka esi pareizajā direktorijā, kurā atrodas tavs Sass fails. Piemēram, ja tavs fails atrodas "C:\tutkit" direktorijā, pārvieto uz šo vietu.
Lai to izdarītu, atver savu terminālu un ievadi sekojošo komandu, ņemot vērā, ka tuaFaila.scss ir tava Sass faila nosaukums, un tuaIzvadesFails.css ir vēlamā CSS izvades faila nosaukums:
sass tuaFaila.scss tuaIzvadesFails.css
Šī komanda pārvērš Sass failu atbilstošajā CSS failā. Ņem vērā, ka failu nosaukumiem nav jābūt identiskiem. Tu vari nosaukt izvades failu pēc saviem ieskatiem.
2. Kompilācijas automatizācija
Lai tu katru reizi manuāli neievadītu pārvēršanas komandu, vari izmantot Watch komandu. Šī komanda uzrauga Sass failu un automātiski veic pārvēršanu, tiklīdz tiek veiktas izmaiņas.
Ievadi sekojošo komandu, lai aktivizētu uzraudzību:
sass --watch tuaFaila.scss:tuaIzvadesFails.css
Ja tu to dari, redzēsi apstiprinājumu, ka uzraudzība ir uzsākta. Tagad katru reizi, kad tu veiksi izmaiņas savā Sass failā, CSS fails automātiski tiks atjaunināts.
3. Vairāku failu uzraudzība
Pieņemsim, ka tu strādā pie vairākiem Sass failiem direktorijā. Šajā gadījumā ir noderīgi uzraudzīt visu direktoriju. Vispirms pārvietojies ārpus sava pašreizējā direktorija un ievadi sekojošo komandu:
sass --watch tutkit/scss: tutkit/css
Šī komanda tagad uzrauga visu scss direktoriju un pārvērš visas izmaiņas attiecīgajos css failos.
4. Tava Sass failu organizācija
Lai saglabātu kārtību savā projektā, tev jāizveido skaidra direktoriju struktūra. Izveido scss direktoriju saviem Sass failiem un atsevišķu css direktoriju izvades failiem. Tas atvieglo uzturēšanu un nodrošina, ka viss paliek organizēts.
Tātad vispirms izveidosim mūsu direktoriju:
Izveido jaunu direktoriju ar nosaukumu scss:
mkdir scss
Un vēl vienu direktoriju ar nosaukumu css:
mkdir css
Tagad tu vari novietot visus savus Sass failus scss direktorijā un ģenerētos CSS failus css direktorijā.
5. Automatizēta direktoriju uzraudzība
Kad tavi direktoriji ir iestatīti, tu vari norādīt SAS, lai uzrauga visas izmaiņas tavā scss direktorijā un atjaunina attiecīgos CSS failus. Izmanto sekojošo komandu:
sass --watch scss:css
Tagad SAS uzraudzīs izmaiņas scss direktorijā un automātiski ģenerēs vai atjauninās attiecīgos CSS failus css direktorijā.
Kopsavilkums – Meistarīga Sass pārvēršana par CSS
Automatizējot Sass kompilāciju, tu vari ietaupīt laiku, izmantojot skaidru un pārdomātu mapju struktūru un izmantojot Watch komandu, lai nekavējoties ieviestu izmaiņas. Tādējādi tu vienmēr esi pārliecināts, ka tavas jaunākās izmaiņas atspoguļojas arī CSS failā.
Bieži uzdotie jautājumi
Kā darbojas Watch komanda Sass?Watch komanda uzrauga vienu vai vairākas Sass failus vai direktorijas, lai automātiski atpazītu izmaiņas un pārvērstu tās CSS failos.
Vai es varu mít vairāku Sass failus vienā direktorijā?Jā, tu vari mít vairāku Sass failus vienā direktorijā, un Watch komanda var tikt konfigurēta, lai uzraudzītu visus failus šajā direktorijā.
Vai Sass faila nosaukumam jāatbilst CSS faila nosaukumam?Nē, nosaukumiem nav jāsakrīt; tu vari nosaukt izvades failu pēc saviem ieskatiem.
Vai ir nepieciešams katru reizi manuāli kompilēt Sass?Nē, Watch komanda padara manuālo kompilāciju nevajadzīgu, automātiski atpazīstot izmaiņas un veicot kompilāciju.
