Sisältö
- Asennus
- Nouseminen ja juokseminen
- Katsaus config.rb: hen
- CSS-asetukset
- Libs-kansio
- Parempi rytmi ja johtaminen
- Vaihe 1
- Vaihe 2
- Välilohkot ja muut elementit
- Yksi viimeinen temppu
- Viimeinen sana
- Piditkö tästä? Lue nämä!
Jos olet minkäänlainen, olet samaa mieltä siitä, että uuden käyttöliittymän rakentamisen aloittaminen on usein toistuva tehtävä. HTML: n, JavaScriptin ja CSS: n määrittämisen välillä (samoin kuin lisäämällä kokeiltuja oletuksia oletusasetuksiin) vietät todennäköisesti suuren osan muutamasta alkuvaiheesta tekemällä sata kertaa aiemmin tekemiäsi asioita. Teimme Sassaparillan pelastaaksemme meidät (ja toivottavasti sinut) tekemästä tätä.
Tietenkin siellä on paljon työkaluja, jotka tekevät myös tämän. Upea HTML5-kattilalevy tai Zurb's Foundation tulee mieleen. Käytimme kuitenkin usein yhtä paljon aikaa elementtien poistamiseen näistä kattiloista kuin silloin, kun lisäsimme elementtejä jokaiseen uuteen projektiin.
Ratkaisu? Yhdistä vain tarvittavat elementit projektin aloittamiseen ja tee niistä mahdollisimman joustavia. Päätimme Sassaparillalle seuraavista tavoitteista kokeilun, erehdyksen ja paljon hienostuneisuuden avulla:
- Tee helposti ja skaalattavasta koodista mahdollisimman helppo ja nopea kirjoittaminen
- Keskity typografiaan ja pystysuuntaiseen rytmiin ja tee tämä helpoksi toteuttaa
- Valmista järjestelmä, joka sopeutuu helposti muutoksiin työskennellessäsi projektia
- Sisällytä vain tarvitsemamme ja käytä mahdollisimman vähän elementtejä
Ja niin, Sassaparilla syntyi. Se ei ole kattilalaatta, se on enemmän lähtökohta projekteillesi.
- Lataa tämän opetusohjelman lähdetiedostot
Asennus
Kuten nimestäkin voi päätellä, Sassaparilla luottaa esiprosessoriin Sassiin ja sen parhaaseen ystävään Compass pitääkseen asiat joustavina. Sinun on asennettava Compass, jotta voit käyttää Sassaparillaa projekteissasi.
Tämä on melko suoraviivaista, jos käytät Macia:
- Yksinkertaisesti avaa pääte
- Kirjoita gem update --system päivittääksesi Ruby-ympäristösi
- Kirjoita gem install compass asentaaksesi Compassin uusimman version
Asennuksen täydelliset tiedot ovat Compass-verkkosivustolla.
Nouseminen ja juokseminen
Sassaparillan käyttöönotto on todella helppoa. Voit käyttää graafista käyttöliittymää, kuten Codekit, mutta oletamme tälle opetusohjelmalle, että olet Macissa, aiot käyttää terminaalia ja olet ladannut Sassaparillan verkkosivustolta sen sijaan, että se olisi haaroitettu GitHubista.
- Luo uusi kansio nimeltä Demo
- Kopioi tiedostot Sassaparillasta Demo-kansioon
- Avaa uusi ikkuna terminaalissa
- Kirjoita cd ja vedä sitten Demo-kansio pääteikkunaan ja paina return. Olet nyt vaihtanut hakemiston kyseiseksi kansioksi
- Kirjoita nyt kompassikello ja paina paluupainiketta
- Sinun pitäisi nähdä viesti "Kompassi kyselee muutoksia". Tämä tarkoittaa, että joka kerta, kun tallennat SCSS-tiedoston, se päivittää CSS: si
- Se siitä
Katsaus config.rb: hen
Määritystiedosto sisältää polut omaisuuteesi. Sassaparillan tapauksessa pidämme konfiguraatiotiedoston projektin juuressa ja sitten kaikki CSS: n, JavaScriptin, kuvat jne. Omaisuuskansiossa, ja jokaisella elementillä on alikansio. Tämä pitää kaiken mukavana ja siistinä.
Voit kuitenkin muuttaa omaisuuksien polkuja määritystiedostossa, jos haluat työskennellä eri asetusten kanssa. Saatat joutua pysähtymään ja suorittamaan kompassin katselukomento uudelleen nähdäksesi muutokset.
Sassaparilla noudattaa tiettyä CSS-kaskadia ja käyttää useita SCSS-tiedostoja, joista jokaisella on eri tarkoitus. Tämän avulla voit sisällyttää (tai olla sisällyttämättä) erillisiä osia tarvitsemasi mukaan.
CSS-asetukset
Kaikki demosivuston SCSS-tiedostot elävät resurssit / CSS-kansiossa. Tässä myös koko CSS kääntyy. Meidän tapauksessamme yhteen CSS-tiedostoon nimeltä screen.css.
Tämä tiedosto sisältää suurimman osan tyylistäsi ja yhdistää muut osittaiset tyylitaulukot yhdeksi CSS-tiedostoksi. Yleensä teet suurimman osan työstäsi tässä tyylitaulukossa, kun olet kirjoittanut yleiset asetuksesi.
Oletusarvoisesti se sisältää joitain oletustyylejä otsikkoelementille, linkeille ja mediakyselyille. Nämä jätetään lähinnä esimerkkinä siitä, miten osa syntaksista, jonka käsittelemme myöhemmin, käytetään. Voit poistaa nämä, jos haluat.
Libs-kansio
Huomaa myös alikansio nimeltä libs. Täällä seuraavat viisi SCSS-tiedostoa elävät. Huomaa, että ne kaikki alkavat alaviivalla. Tämä tarkoittaa yksinkertaisesti sitä, että kun käskemme Compassia kokoamaan projektimme, nämä tiedostot eivät käänny heidän omaan CSS-tiedostoonsa. Siksi alaviivalla etuliitetyt tiedostot sisältävät:
- _reset.scss Tämä tiedosto sisältää yksinkertaisen palautuksen HTML-elementeille. Oletetaan, että verkkosivullasi on lomakkeita, joten nollaa myös nämä. Jos sivustosi ei käytä lomakkeita, voit poistaa nämä palautukset.
- settings.scss Tämä tiedosto sisältää kaikki sivuston muuttujat. Asiat, kuten värit ja kirjasinkoko, elävät täällä. Tämä tiedosto on tarkoitettu ydinasetusten määrittelemiseen, ja siinä käytetään Compassin perustason ja kirjasinkoon mittoja. Lisää siitä myöhemmin.
- mixins.scss Mixins ovat mitä tahansa käyttäjän tekemiä miksauksia projektille (Compassilla on jo monia ennalta määriteltyjä, jotka kannattaa tarkistaa). Oletuksena olemme sisällyttäneet joitain yksinkertaisia, jotta pääset alkuun. Lisää lisää tarpeen mukaan.
- typografia.scss Tämä tiedosto sisältää sivuston ytimen lajittelun. Se perustuu muuttujien asetuksiin asetuksissa.scss, jotka käsitellään seuraavaksi. Jälleen, tämä tiedosto sisältää oletuksena joitain esimerkkejä syntaksista, jotta pääset alkuun.
- forms.scss Tämä tiedosto sisältää oletuslomakelementit ja tavallisen tyylin. Jos et käytä lomakkeita tai haluat mieluummin muotoilla ne itse, voit jättää tämän tiedoston turvallisesti.
Parempi rytmi ja johtaminen
Sassaparilla yrittää tehdä etenemisestä ja välien jakamisesta mahdollisimman helppoa samalla kun kirjoitetaan helppokäyttöistä koodia. Emme ole kiinnostuneita hankalasta matematiikasta, mutta haluamme työskennellä emsissä. Onneksi Compass pystyy käsittelemään tämän muutamalla älykkäällä oletusarvolla ja temppulla sekä muutamalla komennolla.
Näin toimimme:
Vaihe 1
Määritä asetuksissa.scss perus-font-size: oletuksena tämä on 16 kuvapistettä, ja yleensä tämä toimii hyvin laskelmissasi, joten sinun ei tarvitse muuttaa tätä (voit halutessasi).
Määritä perusviivan korkeus: jotta vältetään oudosti sijoitetut etureunat ja suuret aukot viivojen välillä, haluamme käyttää pienempää mittaa, kuten saatat tehdä painosuunnittelussa. Jotain 6 kuvapistettä toimii hyvin. Kannattaa pelata tällä arvolla sen mukaan, mitä fontteja käytät. Myöhemmin käytät tämän perusviivan kerrannaisia luodaksesi etu- ja välilyönnit.
Vaihe 2
Määritä oletustypografia typography.scss-tiedostossa. Tyyliesi soveltaminen on sinun tehtäväsi, mutta tässä esimerkissä käytämme globaaleja asetuksia (esimerkiksi H1, P, UL).
Hyvän vertikaalisen rytmin säilyttämiseksi, kun asetat fonttikoon, käytä adjust-font-size-to -komentoa. Tämä yksinkertaisesti kertoo, että elementistä tulee tämän kokoinen pikseleinä ja sitten se muunnetaan emiksi suhteessa perus-fontin kokoon, jonka perustimme ensimmäisessä vaiheessa. Tästä arvosta (esim. 26 kuvapistettä) tulee myös perusyksikkösi selvittääksesi kuinka monta riviä väliä tarvitset elementin ylä- ja alapuolella.
Esimerkiksi:
@ sisällytä säädä fontin kokoa (26 kuvapistettä);
Säädä fonttikokoksi 26 kuvapistettä ja palauta ne vastaaviksi.
marginaali: 0 0 rytmi (2, 26px) 0;
Lisää kaksi riviä perusviivan korkeudestamme (6x2 = 12 kuvapistettä) elementin alle, perustaa nämä kaksi viivaa kirjasinkokomme mukaan ja peitä ne vastaaviksi.
Siksi:
@ sisällytä säädä fontin kokoa (26 kuvapistettä); marginaali: 0 0 rytmi (2, 26px) 0;
Antaa meille:
kirjasinkoko: 1.625em; viivan korkeus: 1,15385em; marginaali: 0 0 0,46154em 0;
Välilohkot ja muut elementit
Tasaisen pystysuuntaisen rytmin säilyttämiseksi sinun on sijoitettava pystysuunnassa myös muut sivun elementit (osiot jne.). Kuten onnella olisi, Compass-johtaja- ja perävaunutoiminnot on rakennettu juuri tätä tarkoitusta varten.
Käytät niitä niin:
@ sisällytä pehmuste-johtaja (x);
Lisää x täytepistettä rivin korkeuden perusteella elementin yläpuolelle.
@ sisällytä täyte-perävaunu (x);
Lisää x täytepistettä elementin alapuolella olevan perusviivan korkeuden perusteella.
@ sisällytä johtaja (x);
Lisää x marginaalin riviä perustason viivan-korkeuden perusteella.
@ sisällytä perävaunu (x);
Lisää x marginaalin riviä perustason alapuolisen korkeuden perusteella.
Yksi viimeinen temppu
Oletetaan esimerkiksi, että haluat lisätä pikseliarvon mediakyselyyn, mutta haluat, että kyseinen arvo muunnetaan asianomaiseksi em-arvoksi perusviivan korkeudelle tai pohjan kirjasinkoolle. Tämä voi tarkoittaa muutamia laskelmia. Sassaparilla sisältää kaksi toimintoa tämän helpottamiseksi.
Nämä ovat käteviä esimerkiksi kirjainten välissä sekä media-kyselyjen rikkoutumispisteiden tekemisessä em. Pikselien sijaan. Voit käyttää seuraavaa syntaksia:
em-font (#px)
Muuntaa arvon (#) pikseleiksi base-font-koon perusteella.
em-base (#px)
Muuntaa arvon (#) pikseleiksi perusviivan korkeuden perusteella.
Viimeinen sana
Joten sinulla on se. Toivomme, että Sassaparilla on hyödyllinen projekteissasi, ja haluaisimme kuulla sinusta tai jos sinulla on kysyttävää. Lopuksi, jos haluat osallistua, olemme tyytyväisiä sinuun.
Sanat: Peter Coles ja Adam Robertson
Piditkö tästä? Lue nämä!
- Luo täydellinen tunnelmalauta näiden ammattivinkkien avulla
- Loistava Wordpress-opetusohjelman valinta
- Valitse paras verkkosivustojen rakentaja
Kysymyksiä? Kysy kommenteissa!
