Ar norite efektyviai naudoti Sass ir Compass sistemą, kad jūsų svetainė būtų vizualiai patrauklesnė nustatant? Šiame vadove parodysiu, kaip su mažiau pastangų galite kurti pasirinktinius sąrašus – ir tai su Compass pagalba. Taip pat trumpam pažvelgsime į Susy, alternatyvią Sass sistemą, kuri suteikia paprastą tinklelio sistemą. Pasinerkime į šią temą ir atraskime šių įrankių privalumus.
Pagrindinės žinios
- Compass palengvina CSS naudojimą, siūlydamas daugybę naudingų funkcijų.
- Su Compass galite lengvai kurti pasirinktinius sąrašus, kurie naudoja grafiką vietoje standartinių taškų.
- Susy siūlo liekną ir efektyvią tinklelio sistemą, kuri yra naudinga responsyviam dizainui.
Žingsnis 1: Projekto paruošimas
Prieš pradėdami dirbti su Compass, turėtumėte sukurti struktūruotą failą. Sukurkite savo HTML faile sąrašą, kurį norite pritaikyti. Pavyzdžiui, galite sukurti neapibrėžtą sąrašą (UL) su klase „List“, kad vėliau galėtumėte jį pritaikyti.
Žingsnis 2: Compass funkcionalumo pridėjimas
Norėdami sukurti pasirinktinius sąrašus, atidarykite savo CSS failą ir pasiekite Compass tipografiją. Įsitikinkite, kad teisingai kviečiate atitinkamas funkcijas, kad galėtumėte pasinaudoti jų privalumais.
Žingsnis 3: Sąrašo parametrų konfigūracija
Norėdami sukurti pasirinktą sąrašą, turėtumėte nustatyti parametrus, tokius kaip grafika, plotis, aukštis ir linijos aukštis. Pavyzdžiui, galite naudoti piktogramą iš savo „images“ aplanko ir pritaikyti atitinkamus matmenis.
Žingsnis 4: Grafikos integravimas į jūsų CSS
Nustatę savo sąrašo parametrus, eikite į savo CSS failą ir apibrėžkite taisykles sąrašui. Čia galite nustatyti Margin, Padding ir fono grafiką. Compass padės jums sukurti CSS kodą grafikai.
Žingsnis 5: Konfigūracijos failo naudojimas
Viena iš svarbiausių Compass savybių yra tai, kad jis sukuria konfigūracijos failą, kuris padeda jums nustatyti failų kelius. Tai reiškia, kad daugiau nereikia nerimauti dėl kelio pritaikymo, kai perkelsite savo projektą į kitą serverį.
Žingsnis 6: Efektyvus nuorodų spalvų tvarkymas
Dar viena naudinga Compass funkcija yra nuorodų spalvos selektorius. Čia galite lengvai nurodyti įvairius spalvų kodus, ir Compass automatiškai sugeneruos atitinkamą CSS kodą. Tai ne tik sutaupo jums rašymo laiko, bet ir užtikrina vientisą dizainą.
Žingsnis 7: Generuoto CSS kodo patikrinimas
Baigę visus pakeitimus, svarbu patikrinti sugeneruotą CSS. Užtikrinkite, kad Sass sintaksė būtų aiški ir logiška, kad išvengtumėte perteklinio CSS kodo. Stebėkite struktūrą, kad užtikrintumėte savo kodo priežiūros galimybes.
Žingsnis 8: Pažvelkite į Susy sistemą
Dirbdami su Compass, norėčiau jums pristatyti Susy. Ši sistema siūlo paprastą ir lanksčią tinklelio sistemą, leidžiančią greitai kurti responsyvius dizainus. Jūs galite patys nustatyti, kiek stulpelių turėtų turėti jūsų maketas, nesinaudodami didelėmis sistemomis, tokiomis kaip Bootstrap.
Žingsnis 9: Išnagrinėkite išteklius ir dokumentaciją
Pabaigoje, peržiūrėkite tiek Compass, tiek Susy dokumentaciją. Ten galite rasti daug naudingos informacijos ir vadovėlių, kurie padės efektyviai naudoti šiuos įrankius. Nemokami vadovėliai taip pat yra puikus būdas gilinti savo žinias.
Santrauka – Modernus CSS su Sass – Compass ir Susy naudojimas
Jūs dabar sužinojote, kaip naudodami Compass galite kurti paprastus pasirinktinius sąrašus. Darbas su Compass ne tik palengvina CSS kodą, bet ir žymiai supaprastina grafikų ir nuorodų spalvų valdymą. Taip pat gavote pirmąją įžvalgą į Susy sistemą, kuri suteikia vertingą pagalbą kuriant responsyvius dizainus. Naudokite šiuos įrankius, kad jūsų svetainės būtų dar paprastesnės ir efektyvesnės.
Dažnai užduodami klausimai
Kas yra Compass?Compass yra stiliaus lapų sistema, kuri sujungia Sass naudojimą su daugybe naudingų funkcijų ir paprastesne sintakse.
Kaip galiu kurti pasirinktinius sąrašus su Compass?Galite kurti pasirinktinius sąrašus naudodami grafiką vietoj standartinių taškų ir apibrėždami atitinkamas CSS taisykles su Compass.
Koks Susy pranašumas palyginti su kitomis sistemomis?Susy siūlo lengvą tinklelio sistemą, kuri buvo sukurta specialiai responsyviems dizainams, nesukeliant didesnių sistemų, tokių kaip Bootstrap, sudėtingumo.
Kokias papildomas funkcijas siūlo Compass?Compass siūlo tokias funkcijas, kaip nuorodų spalvų valdymas, lanksčios maketo prisitaikymo galimybės ir švari konfigūracija failų keliams, leidžiančioms lengviau dirbti su CSS.
