Norite savo interneto projektus pakelti į aukštesnį lygį? Su Compass, galinga Sass framework, tai lengva padaryti. Šiame vadove sužinosite, kaip efektyviai panaudoti CSS3 funkcijas su Compass. Kaip tai padaryti ir kokios funkcijos jums yra prieinamos, parodysiu jums šiuose kituose žingsniuose.
Svarbiausi pastebėjimai
Dirbant su Compass ir CSS3, galite generuoti modernų ir naršyklėms suderinamą CSS. Pagrindinė informacija yra Compass svetainėje, kur galite rasti dokumentaciją ir gausybę pavyzdžių. Su Compass galite lengvai integruoti CSS3 funkcijas, tokias kaip border-radius arba text-shadow, ir naudotis automatiniais naršyklės prefiksais.
Žingsnis po žingsnio vadovas
Norint pradėti dirbti su Compass, pirmiausia reikia jūsų CSS failo ir teisingo importavimo. Eikite į savo projektą ir atidarykite CSS failą. Dabar turite importuoti Compass. Tam parašykite:
Tai suteikia jums pagrindinę struktūrą, kad galėtumėte dirbti su CSS3.
Dabar noriu parodyti, kaip dirbti su border-radius, nes tai yra labai praktiškas pavyzdys. Turite pasirinkimą, ar pasirinkti visas CSS3 funkcijas, ar konkrečias, tokias kaip border-radius. Rekomenduoju integruoti visas funkcijas, kad turėtumėte daugiau galimybių.
Norėdami naudoti border-radius, sukurkite klasę arba ID, pavyzdžiui, pavadinkite ją.content. Tada įdėkite savo border-radius apibrėžimą į skliaustus. Sintaksę rasite dokumentacijoje: turite nurodyti horizontalų ir vertikalų spindulį.
Parašykite:
Tai išsaugokite ir pažvelkite į savo failą naršyklėje. Kas vyksta? CSS komanda border-radius bus papildyta atitinkamais naršyklės prefiksais. Taip gaunate ne tik paprastą apibrėžimą, bet ir palaikymą įvairioms naršyklėms.
Taip galite pasinaudoti visomis CSS3 variantais, kuriuos siūlo Compass. Pagrindinė informacija apie CSS3 Compass'e yra atitinkama skiltis dokumentacijoje, kurioje išvardytos visos funkcijos. Jei kažko nesuprantate arba norite naudoti naujų, tiesiog pažiūrėkite ten.
Dabar dar vienas pavyzdys, kuriame kviečiate funkciją. Vėl grįžkite į savo CSS ir parašykite:
Ši sintaksė užtikrina, kad box-shadow bus išvestas su atitinkamais naršyklės prefiksais, priklausomai nuo to, kokios naršyklės palaikomos.
Papildomai, Compass suteikia jums galimybę nustatyti naršyklės suderinamumą jūsų projektui. Čia galite apibrėžti, kurias naršykles norite palaikyti, o tai ypač svarbu, jei jūsų užsakovas reikalauja palaikyti senesnes naršyklės versijas.
Apibrėžkite minimalias naršyklių versijas, kurios turėtų būti naudojamos. Tai užtikrins, kad Compass atsižvelgs į šią reikalavimą.
Tai yra pagrindiniai žingsniai, kaip dirbti su Compass ir CSS3 funkcijomis. Oficialioje projekto svetainėje ir kodo nuorodose rasite viską, ko reikia, kad galėtumėte efektyviai dirbti.
Santrauka
Su Compass turite galingą įrankį, kuris ne tik padeda greitai įdiegti CSS3 funkcijas, bet ir palengvina naršyklės palaikymą. Visada turėtumėte turėti Compass dokumentaciją, kad galėtumėte pasinaudoti visomis galimybėmis, kurias siūlo šis framework.
Dažnai užduodami klausimai
Kas yra Compass?Compass yra CSS framework'ą, skirtą Sass, kuris padeda kuriant stilių lapus.
Kaip importuoti Compass į savo CSS failą?Turite savo CSS faile naudoti komandas @import 'compass'; norėdami įtraukti Compass.
Kaip galiu naudoti CSS3 funkcijas su Compass?Galite naudoti CSS3 funkcijas, naudodami mixins, tokius kaip @include border-radius(...), tiesiogiai.
Koks privalumas yra naršyklės-prefiksai?Naršyklės-prefiksai užtikrina, kad jūsų CSS apibrėžimai bus teisingai rodomi senesnėse naršyklėse arba eksperimentinėse naršyklių versijose.
Kaip apibrėžti naršyklės palaikymą Compass?Galite nustatyti minimalų palaikomą naršyklės versiją Compass konfigūracijoje.
