Tõhus töö Compass'i ja CSS3-ga kaasaegse veebidisaini jaoks

Kas soovid oma veebiprojekte järgmisele tasemele viia? Compass, võimas Sass raamistik, teeb selle sinule lihtsaks. Selles juhendis saad teada, kuidas saad tõhusalt kasutada CSS3-funktsioone, mida Compass toetab. Kuidas seda teha ja millised funktsioonid on sinu käsutuses, näitan ma sulle järgmistes sammudes.

Olulisemad teadmised

Compass ja CSS3 kasutamine võimaldab sul genereerida kaasaegset ja brauseriga ühilduvat CSS-i. Keskne tugipunkt on Compass'i veebileht, kus leiad dokumentatsiooni ja hulgaliselt näiteid. Compass'i abil saad hõlpsasti integreerida CSS3 funktsioone nagu border-radius või text-shadow ning kasu saada automaatsetest brauseri eelnevate versioonide prefiksite kasutamisest.

Samm-sammult juhend

Compass'iga alustamiseks vajan kõigepealt sinu CSS-faili ning õiget importi. Mine oma projekti ja avage CSS-fail. Nüüd pead sa Compass'i importima. Selleks kirjuta:

See annab sulle baaskonstruktsiooni CSS3-ga töötamiseks.

Nüüd tahaksin näidata, kuidas töötada border-radius'ega, kuna see on väga praktiline näide. Sa võid valida kõik CSS3-funktsioonid või spetsiifilised nagu border-radius. Soovitan integreerida kõik funktsioonid, et sul oleks rohkem valikuvõimalusi.

Border-radius'i kasutamiseks loo klass või ID, näiteks nimetad selle.content. Seejärel pane sulgudesse oma border-radius'i määratlus. Süntaks on dokumentatsioonis: pead määrama horisontaalse ja vertikaalse raadiuse.

Kirjuta selleks:

@include border-radius(5px, 10px);

Salvesta see ja vaata oma faili brauseris. Mis juhtub? CSS-käsk border-radius lisatakse vastavatesse brauseri eelnevate versioonide prefiksite. Nii saad mitte ainult lihtsa määratluse, vaid ka toe erinevatele brauseritele.

Nii saad kasutada kõiki CSS3 variante, mida Compass pakub. Compass'is on CSS3 keskselt tugipunktiks vastav sektsioon dokumentatsioonis, kus on loetletud kõik funktsioonid. Kui sa ei saa millestki aru või soovid uut rakendada, vaata lihtsalt seal.

Nüüd on veel üks näide, kus sa kutsud välja funktsiooni. Mine tagasi oma CSS-i ja kirjuta:

@include box-shadow(0.5px 0.5px 5px;

See süntaks tagab, et box-shadow väljund hõlmab sobivaid brauseri eelnevate versioonide prefiksite iga toetatud brauseri jaoks.

Lisaks pakub Compass võimalust määrata oma projekti brauserite ühilduvust. Siin saad määrata, milliseid brausereid tuleks toetada, mis on eriti oluline, kui sinu klient nõuab vanemate brauseriversioonide toetust.

Määra minimaalne brauseriversioon, mida tuleks kasutada. Nii tagad, et Compass arvestab selle nõudmisega.

Need on põhiasjad, et töötada Compass'i ja CSS3 funktsioonidega. Ametlik projekti veebileht ja koodiviide pakuvad sulle kõike, mida vajad tõhusaks tööks.

Kokkuvõte

Compass annab sulle võimsa tööriista, mis aitab sul mitte ainult kiiresti implementerida CSS3 funktsioone, vaid ka hõlbustab brauserite toetust. Sul peaks alati olema Compass'i dokumentatsioon käepärast, et kasutada selle raamistikuga kaasnevaid laiaulatuslikke võimalusi.