CSS yra nepakeičiamas kiekvienos modernios svetainės kūrimo komponentas, o naudojant tokias priemones kaip Sass, darbas su stiliaus lapais tampa daug lengvesnis. Compass karkasas išplečia Sass funkcionalumus ir daro vystymąsi dar efektyvesnį. Šiame vadove sužinosi, kaip įdiegti Compass ir paruošti pirmuosius projektus. Pradėkime!
Reikšmingiausi įžvalgai
- Compass užtikrina intuityvų Sass naudojimą ir siūlo paruoštus mixinus.
- Įdiegimas vyksta per komandų eilutę su komanda gem install compass.
- Naują Compass projektą gali lengvai sukurti ir pritaikyti.
- Compass stebėtojas stebi pakeitimus ir automatiškai atnaujina CSS failus.
Žingsnis po žingsnio vadovas
1. Compass įdiegimas
Norėdamas pasinaudoti Compass privalumais, pirmiausia turi jį įdiegti. Tam atidaryk savo komandų eilutę ir įvesk šią komandą:
Ši komanda parsisiunčia reikiamus failus ir įdiegia juos tavo sistemoje. Procesui užbaigti gali prireikti šiek tiek laiko.
Patikrink įdiegimą, įvesdami:
Taip galėsi įsitikinti, kad įdiegimas buvo sėkmingas ir Compass yra paruoštas naudoti.
2. Naujo Compass projekto kūrimas
Norėdamas dirbti su Compass, tau reikia projekto katalogo. Tai gali atlikti taip pat per komandų eilutę. Įvesk šią komandą:
Turi galimybę keisti
Šiame kataloge rasi tokius poaplankius kaip sass, stylesheets ir konfigūracijos failą config.rb. Ši struktūra yra svarbi tavo projekto organizavimui.
3. config.rb failo pritaikymas
Atidaryk config.rb failą su savo mėgstamu redaktoriumi, kad pritaikyti numatytuosius nustatymus. Čia gali apibrėžti CSS, vaizdų ir JavaScript takelius, pagal savo poreikius.
4. Stebėtojo paleidimas
Norėdamas stebėti gyvus savo CSS failų pakeitimus, turi įjungti Compass stebėtoją. Grįžk į savo projekto katalogą:
Tada paleisk stebėtoją su šia komanda:
Tai stebės tavo SCSS failus dėl pakeitimų ir automatiškai juos kompiliuos į CSS.
5. SCSS failų kūrimas ir redagavimas
Dabar gali pradėti rašyti savo stilius. Atidaryk SCSS failą savo sass kataloge. Čia jau gali pasinaudoti Compass importu, kad naudotum mixinus ar kitas paruoštas funkcijas.
Išsaugok failą ir pažvelk į savo stylesheets katalogą, kad pamatytum, kaip Compass konvertuoja SCSS failą į CSS failą.
6. Paruoštų mixinų naudojimas
Compass siūlo daugybę naudingų mixinų, kurie palengvina kūrimą. Pavyzdžiui, jei nori naudoti Border-Radius, tiesiog turi pasikviesti mixiną.
Compass rūpinasi įvairių naršyklių prefiksais, todėl tu neturi dėl to jaudintis.
7. Projekto struktūros plėtimas
Kai susipažinsi su pagrindais, gali laisvai plėsti savo projekto struktūrą. Organizuoji savo SCSS failus į skirtingas kategorijas, tokias kaip išdėstymas, spalvos ar šriftai, kad būtų lengviau sekti.
8. Išvada
Po to, kai įdiegsi Compass ir sužinosi, kaip sukurti projektą, atsivers daugybė galimybių. Pasinaudok Compass mixinais, kad efektyviai suformuotum savo stilius ir greitai įgyvendintum patrauklius dizainus.
Santrauka - Compass skirta Sass: Įdiegimas ir pirmieji žingsniai
Compass įdiegimas yra pirmas žingsnis į optimizuotą CSS kūrimą su Sass. Su tinkamomis priemonėmis gali supaprastinti savo darbo procesus ir pasiekti puikių rezultatų.
Dažnai užduodami klausimai
Kaip įdiegti Compass?Compass įdiegi su komanda gem install compass komandų eilutėje.
Kaip sukurti naują Compass projektą?Naudok komandą compass create komandų eilutėje.
ką galiu pritaikyti config.rb faile?config.rb faile gali apibrėžti CSS, vaizdų ir JavaScript takelius.
Ką daro Compass stebėtojas?Stebėtojas stebi pakeitimus tavo SCSS failuose ir automatiškai juos kompiliuoja į CSS.
Kokius mixinus siūlo Compass?Compass siūlo daugybę mixinų CSS savybėms, tokioms kaip Border-Radius, Flexbox ir daugelis kitų.
