Halusitko nostaa verkkoprojektejasi seuraavalle tasolle? Compass, tehokas Sass-kehys, tekee siitä helppoa. Tässä oppaassa opit, miten voit hyödyntää CSS3-ominaisuuksia Compassin avulla tehokkaasti. Näytän sinulle seuraavissa vaiheissa, miten toimia ja mitä ominaisuuksia on käytettävissäsi.
Tärkeimmät havainnot
Työskentely Compassin ja CSS3:n kanssa mahdollistaa sinulle nykyaikaisen ja selaimen yhteensopivan CSS:n luomisen. Keskeinen lähtökohta on Compassin verkkosivusto, josta löydät dokumentaation ja lukuisia esimerkkejä. Compassin avulla voit helposti käyttää CSS3-ominaisuuksia, kuten border-radius tai text-shadow, ja saat automaattisia selaimen etuliitteitä.
Vaihe vaiheelta -opas
Aloittaaksesi Compassin käytön, tarvitsen ensin CSS-tiedostosi ja oikean importin. Siirry projektiisi ja avaa CSS-tiedosto. Nyt sinun on importoitava Compass. Kirjoita seuraava:
Tämä antaa sinulle perustan CSS3:n käyttöön.
Haluan nyt näyttää sinulle, miten käytetään border-radiusia, koska tämä on erittäin käytännöllinen esimerkki. Sinulla on mahdollisuus valita kaikki CSS3-toiminnot tai spesifiset, kuten border-radius. Suosittelen, että otat kaikki toiminnot käyttöön, jotta sinulle on enemmän vaihtoehtoja saatavilla.
Käyttääksesi border-radiusia, luo luokka tai id, esimerkiksi nimeä se.content. Tämän jälkeen lisää kaarisulkeisiin border-radius-määrittelysi. Löydät syntaksin dokumentaatioista: sinun on määritettävä vaakasuora ja pystysuora säde.
Kirjoita seuraavaa:
Tallenna tämä ja katso tiedostoasi selaimessa. Mitä tapahtuu? CSS-komento border-radius täydennetään vastaavilla selaimen etuliitteillä. Näin saat yksinkertaisen määritelmän lisäksi tukea eri selaimille.
Tällä tavalla voit käyttää kaikkia CSS3-variantteja, joita Compass tarjoaa. CSS3:n keskeinen kohta Compassissa on vastaava osio dokumentaatiossa, jossa kaikki toiminnot on lueteltu. Jos et ymmärrä jotain tai haluat käyttää jotain uutta, voit tarkistaa sen sieltä.
Seuraavaksi toinen esimerkki, jossa käytät toimintoa. Palaa jälleen CSS-tiedostoon ja kirjoita:
Tämä syntaksi varmistaa, että box-shadowilla on sopivat selaimen etuliitteet tuetuille selaimille.
Lisäksi Compass tarjoaa sinulle mahdollisuuden määrittää projektisi selaimen yhteensopivuuden. Täällä voit määritellä, mitkä selaimet tulisi tukea, mikä on erityisen tärkeää, jos asiakkaasi vaatii vanhempien selaimien tukemista.
Määritä selainten vähimmäisversio, jota tulisi käyttää. Näin varmistat, että Compass ottaa tämän vaatimuksen huomioon.
Nämä ovat perusvaiheita Compassin ja CSS3-toiminnallisuuksien kanssa työskentelyyn. Virallinen projektisivusto ja koodiviittaus tarjoavat sinulle kaiken, mitä tarvitset tehokkaaseen työskentelyyn.
Yhteenveto
Compassin avulla sinulla on käytössäsi tehokas työkalu, joka ei ainoastaan auta sinua toteuttamaan CSS3-ominaisuuksia nopeasti, vaan myös helpottaa selainten tuen hallintaa. Sinun tulisi aina pitää Compassin dokumentaatio mukana, jotta voit hyödyntää tätä kehystä tarjoamia laajoja mahdollisuuksia.
Usein kysytyt kysymykset
Mikä on Compass?Compass on Sassille tarkoitettu CSS-kehys, joka auttaa sinua tyylitiedostojen luomisessa.
Kuinka voin tuoda Compassin CSS-tiedostooni?Sinun on käytettävä CSS-tiedostossasi komentoa @import 'compass'; tuodaksesi Compassin.
Kuinka voin käyttää CSS3-ominaisuuksia Compassilla?Voit tuoda CSS3-ominaisuuksia käyttämällä mixinejä, kuten @include border-radius(...), suoraan.
Mikä on selaimen etuliitteiden etu?Selaimen etuliitteet varmistavat, että CSS-määrittelysi näkyvät oikein vanhemmissa selaimissa tai kokeellisissa selainvaihtoehdoissa.
Kuinka määritän selainten tuen Compassissa?Voit määrittää Compassin asetuksissa tuetun selaimen vähimmäisversion.
