CSS on hädavajalik komponent iga kaasaegse veebiarenduse juures, ja tööriistade nagu Sass abil on töö tegemine stiililehtedega oluliselt lihtsam. Compass-raamistik laiendab Sassi funktsioone ja muudab arenduse veel efektiivsemaks. Selles juhendis õpid, kuidas Compass installida ja esimesi projekte seadistada. Alustame kohe!
Olulisemad teadmised
- Compass tagab Sassi intuitiivse kasutamise ning pakub eelnevalt koostatud mixine.
- Installimine toimub käsurealt käsku gem install compass kasutades.
- Sa saad luua uue Compass-projekti väga lihtsalt ning kohandada seda.
- Compass'i vaataja jälgib muudatusi ja värskendab CSS-faile automaatselt.
Samuti-sammult juhend
1. Compass'i installimine
Et kasutada Compass'i eeliseid, pead sa selle esmalt installima. Ava selleks oma käsurea ja sisesta järgmine käsk:
See käsk laeb alla vajalikud failid ja installib need sinu süsteemi. Toiming võib võtta hetke, kuni see on lõpule viidud.
Kontrolli installimist, sisestades järgmist:
Nii saad sa veenduda, et instalatsioon on edukas ja Compass on valmis kasutamiseks.
2. Uue Compass-projekti loomine
Compass'iga töötamiseks vajad sa projekti katalooge. Seda saad samuti teha käsurealt. Sisesta järgmine käsk:
Sa saad
Sellest kataloogist leiad alamkaustad nagu sass, stylesheets ja konfigureerimisfail config.rb. See struktuur on sinu projekti korraldamiseks oluline.
3. config.rb faili kohandamine
Ava config.rb fail oma eelistatud redigeerijaga, et kohandada vaike seadistusi. Siin saad määrata CSS, piltide ja JavaScripti teed vastavalt oma vajadustele.
4. Vaataja käivitamine
Et näha oma CSS-failide elavaid muudatusi, pead sa aktiveerima Compass'i vaataja. Mine tagasi oma projekti katalooge:
Seejärel käivita vaataja järgmise käsuga:
See jälgib sinu SCSS-faile muudatuste osas ja kompileerib need automaatselt CSS-iks.
5. SCSS-failide loomine ja redigeerimine
Nüüd saad alustada oma stiilide kirjutamist. Ava SCSS-fail oma sass kataloogis. Siin saad juba kasutada Compass'i importi, et kasutada mixine või muid eelnevalt koostatud funktsioone.
Salvesta fail ja vaata oma stylesheets katalooge, et näha, kuidas Compass muudab SCSS-faili CSS-failiks.
6. Eelnevalt koostatud mixinide kasutamine
Compass pakub palju kasulikke mixine, mis hõlbustavad arendust. Kui soovid näiteks kasutada Border-Radius't, pead lihtsalt mixini helistama.
Compass hoolitseb erinevate brauserite jaoks eelväärsete eest, nii et sa ei pea selle üle muretsema.
7. Projekti struktuuri laiendamine
Kuna oled alustega tuttav, saad anda oma projekti struktuurile soovi korral laiendatud. Organiseeri oma SCSS-failid erinevatesse kategooriatesse nagu paigutus, värvid või fondid, et hoida ülevaadet.
8. Kokkuvõte
Pärast Compass'i installimist ja teadmist, kuidas projekt üles seada, avaneb sinule lai valik võimalusi. Kasuta Compass'i mixine, et kujundada oma stiile efektiivselt ja rakendada atraktiivseid kujundusi kiiresti.
Kokkuvõte - Compass Sassi jaoks: Installimine ja esimesed sammud
Compass'i installimine on esimene samm optimeeritud CSS arenduses Sassi abil. Õigete tööriistadega saad oma töövooge lihtsustada ja saavutada suurepäraseid tulemusi.
Korduma kippuvad küsimused
Kuidas installida Compass?Sa installid Compass'i käsuga gem install compass käsureal.
Kuidas luua uut Compass projekti?Kasutage käsku compass create käsureal.
Mida saan config.rb failis kohandada?config.rb failis saad määrata teed CSS, piltidele ja JavaScriptile.
Mida teeb Compass'i vaataja?Vaataja jälgib muudatusi sinu SCSS-failides ja kompileerib need automaatselt CSS-iks.
Milliseid mixine Compass pakub?Compass pakub arvukalt mixine CSS omaduste jaoks, nagu Border-Radius, Flexbox ja palju muud.
