Sa soovid oma CSS-faile selgelt ja efektiivselt kokku võtta? Sass annab sulle võimaluse importida erinevaid SCSS faile ja kombineerida need. Selles juhendis näitan, kuidas seda teha ja millele tähelepanu pöörata.
Olulised arusaamad
- Impordi SCSS-faile @import abil, et need tähendada keskset faili.
- Käita failinimes eesliidet (_), et vältida eraldi CSS-faili genereerimist.
- Keskne juhtimisfail aitab hoida sinu Sass-koodi organiseerituna.
Samm-sammult juhend
Esimese asjana selgita, millist süntaksit soovid kasutada. Sass'il on kaks süntaksi valikut: klassikaline Sass-süntaks ja SCSS-süntaks. Soovitan SCSS süntaksit, kuna see annab sulle rohkem paindlikkust, eriti kui soovid kasutada olemasolevat CSS-i, ilma et peaksid seda kohandama.
Nüüd on aeg avada oma projekti kataloog. Looma oma SCSS-failid selges kataloogis. Sul võib olla mitu SCSS-faili, millest igaüks käsitleb erinevaid stiilivorme sinu veebilehel.
Oletame, et oled juba loonud mitu SCSS-faili. Nüüd pead mõtlema, kuidas soovid neid faile importida. Kasuta @import käsu, et importida SCSS-faile peafile, näiteks app.scss.
Importimisjuhendi loomiseks sisesta oma peafaili lihtsalt @import 'deine_datei';. Kui sa ei soovi kasutada CSS-i sufiksit, võid selle jättagi välja. See teeb juhtimise lihtsamaks ja selgemaks.
Üks eriti praktiline trikk on failinime eesliideti kasutamine. Kui sa näiteks lood faili nimega _fong.scss, ei genereerita seda eraldi CSS-failina. See lihtsustab failide haldamist sinu projekti, kuna vältida on tarbetute CSS-failide teket.
Nüüd saad oma peamist SCSS-faili vaadata. Sa ei näe imporditud faili eraldi CSS-failina, mis hoiab sinu väljundi korrastatuna. See tähendab, et saad lihtsalt oma stiilid ühes failis hallata.
Loo keskne juhtimisfail. Nimetage see näiteks app.scss. See juhtimisfail sisaldab kõiki importimisjuhendeid sinu SCSS-failide jaoks. Nii saad heale ülevaatele kogu oma projekti stiilidest.
Kui kasutad alamkaustu, ole teadlik, et pead importimise juhendis määrama kaustade nime. See võimaldab sul projekti struktuuri selge ja arusaadavana hoida.
Importide järjekord on oluline. Hilisemad stiliseerimisobjektid kirjutavad varasemad üle. Veenduge, et impordite need soovitud järjekorras, et vältida soovimatuid ülekirjutamisi.
Kuna kõik on lisatud ja oled SCSS-failid puhtalt oma peafaili integreerinud, saad projekti kompileerida ja CSS-faili kontrollida. Sa näed, et kõik sinu stiilid on ühes kohas ja samal ajal minimeeritakse HTTP-päringute arvu.
Kokkuvõte
Kasutades @import koos تنظيق (alusjoon) failinimes, saad tõhusalt SCSS-faile kokku panna ja suurendada oma stiililehe ülevaatlikkust. Keskne juhtimisfail kindlustab ka selge struktuuri.
Tihti esitatud küsimused
Kuidas vahetan Sass'i ja SCSS'i vahel?Sa saad lihtsalt süntaksit ja importimise juhendeid muuta; SCSS on paindlikum.
Millised on failinimes alusjoone eelised?See takistab faili genereerimist eraldi CSS-failina, mis suurendab ülevaatlikkust.
Kuidas organiseerida oma SCSS-faile paremini?Kasutage alamkaustu ja keskset juhtimisfaili, et tuua projekti struktuuri.
