Tu nori, kad tavo CSS-failai būtų aiškiai ir efektyviai sujungti? Sass suteikia galimybę importuoti įvairius SCSS failus ir sujungti juos. Šioje gidėje parodysiu, kaip tai padaryti ir į ką reikėtų atkreipti dėmesį.
Svarbiausi įžvalgos
- Importuok SCSS failus su @import, kad juos sujungtum viename pagrindiniame faile.
- Naudok pirmąjį pabraukimą (_) faile, kad būtų išvengta atskiros CSS failo generavimo.
- Pagrindinis valdymo failas padeda organizuoti tavo Sass kodą.
Žingsnis po žingsnio gidė
Pirmiausia apsispręsk, kokią sintaksę nori naudoti. Sass turi dvi sintaksės parinktis: klasikinę Sass sintaksę ir SCSS sintaksę. Aš rekomenduoju SCSS sintaksę, nes ji suteikia daugiau lankstumo, ypač jei nori naudoti esamus CSS be būtinybės juos keisti.
Dabar laikas atidaryti savo projekto katalogą. Sukurk SCSS failus aiškiame kataloge. Tu gali turėti keletą SCSS failų, kurie kiekvienas nagrinėja skirtingus tavo svetainės stiliaus aspektus.
Tarkime, kad jau sukūrei keletą SCSS failų. Dabar turi apsvarstyti, kaip nori importuoti šiuos failus. Naudok @import sakinį, kad importuotum SCSS failus į pagrindinį failą, pavyzdžiui, app.scss.
Norėdamas sukurti importavimo sakinį, savo pagrindiniame faile tiesiog įvesk @import 'tavo_failas';. Jei nenori naudoti CSS priedų, gali juos praleisti. Tai padaro tvarkingesnį ir lengviau valdomą failų sąrašą.
Ypač naudingas triukas yra naudojimas pirmo pabraukimo faile pavadinime. Jei, pavyzdžiui, sukursi failą pavadinimu _fong.scss, jis nebus pateikiamas kaip atskiras CSS failas. Tai palengvina failų valdymą tavo projekte, nes išvengiama nereikalingų CSS failų.
Dabar gali peržiūrėti savo pagrindinį SCSS failą. Tu nepamatysi importuoto failo kaip atskiro CSS failo, Kas padeda išlaikyti tavo išvestį tvarkingą. Tai reiškia, kad gali paprastai valdyti savo stilius viename faile.
Sukurk pagrindinį valdymo failą. Pavadink jį, pavyzdžiui, app.scss. Šis valdymo failas turės visus importavimo sakinius tavo SCSS failams. Taip gausi gerą vaizdą apie visus savo projekto stiliaus aspektus.
Jei naudoji po katalogus, būk pasiruošęs, kad turėsi nurodyti katalogo pavadinimą importavimo sakinyje. Tai leis tau išlaikyti savo projekto struktūrą aiškią ir tvarkingą.
Importų tvarka yra svarbi. Vėlesni stiliai perrašys ankstesnius. Įsitikink, kad juos importuoji norima tvarka, kad išvengtum nepageidaujamų perrašymų.
Jei viskas yra įdėta, ir tu švariai įtraukėi SCSS failus savo pagrindiniame faile, gali kompiliuoti projektą ir patikrinti CSS failą. Pamatysi, kad visi tavo stiliai yra naudojami viename faile, o tuo pačiu sumažinamos HTTP užklausų skaičius.
Santrauka
Naudodamas @import kartu su تنظيق (pabraukimu) faile pavadinime gali efektyviai sujungti SCSS failus ir padidinti savo stiliaus lapo aiškumą. Pagrindinis valdymo failas taip pat užtikrina aiškią struktūrą.
Dažnai užduodami klausimai
Kaip pereiti nuo Sass prie SCSS?Tiesiog pakeisk sintaksę ir importavimo nurodymus; SCSS yra lankstesnė.
Kokie privalumai pabraukimo faile pavadinime?Jis užkerta kelią failui būti pateiktai kaip atskiram CSS failui, kas padidina aiškumą.
Kaip geriau organizuoti savo SCSS failus?Naudok po katalogus ir pagrindinį valdymo failą, kad suteiktum struktūrą savo projektui.
