Vai vēlies savus tīmekļa projektus pacelt jaunā līmenī? Ar Compass, jaudīgu Sass ietvaru, tas kļūst viegli. Šajā rokasgrāmatā uzzināsi, kā efektīvi izmantot CSS3 funkciju atbalstu, izmantojot Compass. Kā to izdarīt un kādas funkcijas tev būs pieejamas, es parādīšu nākamajos soļos.
Svarīgākie atziņas
Darbs ar Compass un CSS3 ļauj tev ģenerēt modernu un pārlūkprogrammu saderīgu CSS. Centrālā vieta ir Compass mājaslapa, kurā atradīsi dokumentāciju un daudzas piemērus. Ar Compass tu vari vienkārši iekļaut CSS3 funkcijas, piemēram, border-radius vai text-shadow, un gūt labumu no automātiskiem pārlūkprogrammu prefiksiem.
Solī pa solim rokasgrāmata
Lai sāktu ar Compass, man vispirms vajag tavu CSS failu un pareizo importu. Iet uz savu projektu un atver CSS failu. Tagad tev jāimportē Compass. Tam tu raksti:
Tas dod tev pamatu, lai strādātu ar CSS3.
Tagad es vēlos tev parādīt, kā strādāt ar border-radius, jo tas ir ļoti praktisks piemērs. Tu vari izvēlēties iekļaut visas CSS3 funkcijas vai specifiskas, piemēram, border-radius. Es iesaku iekļaut visas funkcijas, lai tev būtu pieejamas vairākas iespējas.
Lai izmantotu border-radius, tu izveido klasi vai ID, piemēram, to sauc par.content. Pēc tam tu pievieno izliektās iekavas iekšā savu border-radius definīciju. Sintakse ir atrodama dokumentācijā: tev jānorāda horizontālais un vertikālais rādiuss.
Raksti:
Tu to saglabā un paskaties savu failu pārlūkā. Kas notiek? CSS komanda border-radius tiks papildināta ar attiecīgajiem pārlūkprogrammu prefiksiem. Tādējādi tu saņem ne tikai vienkāršu definīciju, bet arī atbalstu dažādiem pārlūkiem.
Šādā veidā tu vari izmantot visus CSS3 variantus, ko piedāvā Compass. Centrālā vieta CSS3 Compass ir attiecīgā sadaļa dokumentācijā, kurā ir uzskaitītas visas funkcijas. Ja tu kaut ko nesaproti vai vēlies izmantot jaunu, vienkārši paskaties tur.
Tagad vēl viens piemērs, kurā tu izsauc funkciju. Atgriezies pie sava CSS un raksti:
Šī sintakse nodrošina, ka box-shadow tiek izsvērtas ar atbilstošajiem pārlūkprogrammu prefiksiem attiecīgajiem atbalstītajiem pārlūkiem.
Papildus Compass tev sniedz iespēju noteikt pārlūkprogrammu saderību savam projektam. Šeit tu vari definēt, kuri pārlūki jāatbalsta, kas ir īpaši svarīgi, ja tavs klients uzstāj uz vecāku pārlūku versiju atbalstu.
Definē minimālo pārlūkprogrammu versiju, kas jāizmanto. Tādējādi tu nodrošini, ka Compass ņem vērā šo prasību.
Šie ir pamata soļi, lai strādātu ar Compass un CSS3 funkcionalitāti. Oficiālā projekta mājaslapa un kodu atsauce sniedz tev visu, kas nepieciešams, lai efektīvi strādātu.
Kopsavilkums
Ar Compass tev ir jaudīgs rīks, kas ne tikai palīdz ātri ieviest CSS3 funkcijas, bet arī atvieglo pārlūkprogrammu atbalstu. Tev vienmēr vajadzētu būt pie rokas Compass dokumentācijai, lai izmantotu plašās iespējas, ko šis ietvars piedāvā.
Bieži uzdotie jautājumi
Kas ir Compass?Compass ir CSS ietvars Sass, kas palīdz tev veidot stila lapas.
Kā es varu importēt Compass savā CSS failā?Tev jāizmanto komanda @import 'compass'; savā CSS failā, lai iekļautu Compass.
Kā varu izmantot CSS3 funkcijas ar Compass?Tu vari tieši iekļaut CSS3 funkcijas, izmantojot mixins, piemēram, @include border-radius(...).
Kādi ir pārlūkprogrammu prefiksu ieguvumi?Pārlūkprogrammu prefiksi nodrošina, ka tavas CSS definīcijas tiek pareizi attēlotas vecākos pārlūkos vai eksperimentālajās pārlūkprogrammu versijās.
Kā es varu definēt pārlūkprogrammu atbalstu Compass?Tu vari noteikt minimālo atbalstīto pārlūkprogrammu versiju Compass konfigurācijā.
