CSS ir neaizvietojama moderna tīmekļa izstrādes sastāvdaļa, un ar tādām rīkiem kā Sass darbs ar stilu lapām kļūst ievērojami vieglāks. Compass-rāmja piedāvātās funkcionalitātes paplašina Sass iespējas un padara izstrādi vēl efektīvāku. Šajā rokasgrāmatā tu iemācīsies, kā instalēt Compass un izveidot pirmos projektus. Sāksim!
Galvenās atziņas
- Compass nodrošina intuitīvu Sass izmantošanu un piedāvā priekšizstrādātus mixins.
- Instalācija notiek caur komandu rindu, izmantojot komandu gem install compass.
- Tu vari izveidot jaunu Compass projektu ļoti vienkārši un pielāgot to.
- Compass Watcher jeb novērotājs seko izmaiņām un automātiski atjaunina CSS failus.
Solim pa solim rokasgrāmata
1. Compass instalācija
Lai izmantotu Compass priekšrocības, tev tas vispirms jāinstalē. Atver savu komandu rindu un ieraksti sekojošo komandu:
Šī komanda lejupielādē nepieciešamās failus un instalē tos tavā sistēmā. Var paiet brīdis, līdz process ir pabeigts.
Pārbaudi instalāciju, ierakstot sekojošo:
Šādi tu vari pārliecināties, ka instalācija ir veiksmīga un Compass ir gatavs lietošanai.
2. Jauna Compass projekta izveidošana
Lai strādātu ar Compass, tev nepieciešama projekta direktorija. To tu vari izdarīt arī caur komandu rindu. Ieraksti sekojošo komandu:
Tu vari aizvietot
Šajā direktorijā tu atradīsi apakšmapes, piemēram, sass, stylesheets un konfigurācijas failu config.rb. Šī struktūra ir svarīga, lai organizētu tavu projektu.
3. config.rb faila pielāgošana
Atver config.rb failu ar savu iecienīto redaktoru, lai pielāgotu noklusējuma iestatījumus. Šeit tu vari definēt ceļus CSS, attēliem un JavaScript atkarībā no savām prasībām.
4. Novērotāja palaišana
Lai redzētu savas CSS failu dzīvās izmaiņas, tev jāaktivizē Compass novērotājs. Atgriezies tavā projekta direktorijā:
Pēc tam palaiž novērotāju ar sekojošo komandu:
Tas uzrauga tavas SCSS failu izmaiņas un automātiski tās kompilē CSS.
5. SCSS failu izveidošana un rediģēšana
Tagad tu vari sākt rakstīt savus stilus. Atver SCSS failu savā sass direktorijā. Šeit tu jau vari izmantot Compass importu, lai izmantotu mixins vai citas priekšizstrādātas funkcijas.
Saglabā failu un paskaties savā stylesheets direktorijā, lai redzētu, kā Compass pārvērš SCSS failu CSS failā.
6. Priekšizstrādāto mixins izmantošana
Compass piedāvā daudz noderīgu mixins, kas atvieglo izstrādi. Ja tu, piemēram, vēlies izmantot Border-Radius, tev vienkārši jāsauc mixin.
Compass parūpējas par prefiksēm dažādiem pārlūkiem, tādēļ tevi nav jāuztraucas par to.
7. Projekta struktūras paplašināšana
Kad tu esi iepazinies ar pamatiem, vari pēc saviem ieskatiem paplašināt projekta struktūru. Organizē savus SCSS failus dažādās kategorijās, piemēram, izkārtojums, krāsas vai fonti, lai saglabātu pārskatu.
8. Secinājums
Pēc tam, kad tu esi instalējis Compass un zini, kā uzsākt projektu, tev ir pieejams plašs iespēju klāsts. Izmanto Compass mixins, lai efektīvi veidotu savus stilus un ātri īstenotu pievilcīgus dizainus.
Kopsavilkums - Compass par Sass: Instalācija un pirmie soļi
Compass instalācija ir pirmais solis optimizētai CSS izstrādei ar Sass. Ar pareizajiem rīkiem tu vari vienkāršot savus darba procesus un sasniegt lieliskus rezultātus.
Biežāk uzdotie jautājumi
Kā es varu instalēt Compass?Tu instalē Compass ar komandu gem install compass komandu rindu.
Kā es varu izveidot jaunu Compass projektu?Izmanto komandu compass create komandu rindu.
Ko es varu pielāgot config.rb failā?config.rb failā tu vari definēt ceļus CSS, attēliem un JavaScript.
Ko dara Compass novērotājs?Novērotājs uzrauga izmaiņas tavos SCSS failos un automātiski tās kompilē CSS.
Kādi mixins ir pieejami Compass?Compass piedāvā daudzas mixins CSS atribūtiem, piemēram, Border-Radius, Flexbox un daudzus citus.
