Sass-opetusohjelma Online-vCard-kortin luominen Sass & Compassilla

Tänään aiomme jatkaa keskustelua Sassista ja tämä on Sass-sarjan viimeinen osa. Tällä kertaa tämä on teoreettisen lähestymistavan sijasta hieman käytännöllisempi. Luomme online-vCard-kortin käyttäen Sassia Compassin kanssa.

Ajatuksena on, että vCard-kortin pitäisi olla helposti säädettävissä, värin ja koon mukaan. Prosessissa käytämme muutamia Sass- ja Compass-ominaisuuksia, kuten Muuttujat, Mixins, Operations, Selectors Perintö, Nested Rules ja Compass-avustajat. Jos olet unohtanut aiemmat viestit tästä sarjasta, kannattaa tarkastella niitä ennen kuin jatkat.

Suunnittelu ja Wireframing

Kun työskentelet Sassin ja kompassin kanssa, suunnittelu on välttämätöntä. Meidän on yleensä oltava suuri kuva siitä, miten lopputuloksemme (esim. Sivu tai verkkosivusto) tulee olemaan. On hyödyllistä selata joitakin sivustoja, kuten Behance tai Dribbble ideoita varten. Voimme sitten laatia ajatuksia paperille tai rakentaa sen lankasuoraan, kuten alla oleva esimerkki.

Kuten edellä olevasta kuvasta näet, vCard-paketti sisältää yhteystiedot "John" - kuvaprofiili, joitakin tietoja Johnista, kuten hänen nimensä, sähköpostiosoitteensa, puhelinnumeronsa ja lyhyt kuvaus siitä, kuka hän on tai mitä hän tekee. Tämä on meidän bio-osio.

Alla on hänen sosiaaliset identiteettinsä sosiaaliset painikkeet. Tämä on meidän sosiaalinen osio.

Varojen valmistelu

Ennen kuin aloitamme koodauksen, tässä on muutamia olennaisia valmiuksia. Ymmärrän, että sinun pitäisi nyt asentaa Sass ja Compass laitteeseesi.

(Jos et ole varma, oletko asentanut ne, voit suorittaa tämän komennon sass -v tai kompassi -v kautta Komentorivi tai terminaali tai, voit aina käyttää sovellusta kuten Scout App, jos haluat työskennellä GUI: n kanssa.)

Tarvitsemme myös muutamia omaisuuksia, kuten fonttikuvakkeita ja sosiaalisen median kuvakkeita, joita saat paikasta kuten ModernPictograms.

Lopuksi, koska käytämme komentokehotetta / terminaalia tähän opetusohjelmaan, meidän on siirryttävä hakemistoon ja suoritettava Compass-projekti näiden kahden komennon avulla: kompassi init ja kompassikello.

HTML-merkintä

Alla on vCard-koodisi HTML-merkintä, se on melko yksinkertaista. Kaikki osat on kääritty loogiseen HTML5-tunnisteeseen

      Thoriq Firdaus
 [email protected]
 (+62) 1.2345.678.9
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse dolor neque, eleifend at pellentesque quis, convallis sit amet tellus. Etiam et auctor arcu.
 
 
 
   Facebook
  Viserrys
 Google+
 Dribbble

Kuten edellä näet, sosiaaliset identiteetit sisältyvät "sosiaaliseen"osio on rakennettu luettelon elementteihin, jotta voimme helposti näyttää ne vierekkäin. Jokaiselle niistä annetaan luokan nimi tämän yleissopimuksen mukaisesti sosiaalinen facebookissa, sosiaalinen-twitter, sosiaalinen-google ja niin edelleen.

Kompassin määritys

Meidän on määritettävä kompassi hieman poistamalla muutama rivi config.rb tiedosto seuraavasti:

 # Voit valita haluamasi tulostustavan täältä (voidaan ohittaa komentoriviltä): output_style =: expanded # Suhteellisten polkujen ottaminen käyttöön kompassiavustustoimintojen avulla. Uncomment: suhteellinen_asetus = true # Voit poistaa virheenkorjauskommentit, jotka näyttävät valintasi alkuperäisen sijainnin. Uncomment: line_comments = false

Jos et löydä config.rb tiedostoa, et todennäköisesti ole suorittanut tätä komentoa kompassi init projektihakemistossa.

Tiedostojen tuominen

Koska käytämme Compassia, meidän on tuotava se käyttöön;

 @import "kompassi";

Ja henkilökohtainen mieltymykseni on palauttaa oletusasetukset selaimista siten, että tulostus tehdään johdonmukaisemmin. Tässä tapauksessa kompassilla on Reset-moduuli. Tämä moduuli perustuu Eric Meyerin CSS-nollaukseen ja sitä voidaan tuoda käyttämällä;

 @import "kompassi / nollaus";

Haluan kuitenkin mieluummin käyttää Normalisointia Sass / Scss-muodossa. Lataa tiedosto täältä, tallenna se nenäkkyys työhakemisto ja tuoda se tyylisivuillemme.

 @import "normalize";

Suositeltava lukeminen: CSS-tyylin prioriteettitason tarkistaminen

muuttujat

Tyylilehdessä on varmasti muutamia vakioarvoja, joten tallennamme ne muuttujiin ja nämä kaksi muuttujaa määrittelevät vCard-pohjaisen värin.

 $ base: #fff; $ dark: tummempi ($ base, 10%);

Samalla kun $ leveys alla oleva muuttuja on sivun leveys; se on myös perustana muiden elementtien koon määrittämiselle.

 $ leveys: 500px; $ space: $ width / 25; // = 20px

Ja $ tila muuttuja, kuten näette, tulee olemaan vCard-oletusarvoisen etäisyyden tai sarakekoon, joka tässä esimerkissä olisi 20px;

Kompassissa on myös apuohjelmia kuvan koon havaitsemiseksi ja käytämme tätä ominaisuutta kuvaprofiilissamme seuraavasti;

 $ img: image-width ("me.jpg") + (($ space / 4) * 2);

Ylimääräinen Lisäys of (($ space / 4) * 2) Yllä olevassa koodissa on laskettava kuvan koko leveys mukaan lukien raja, joka kuvaa kuvaa. Kehyksellä on yleensä kaksi puolta; ylhäältä ja alhaalta / vasemmalta ja oikealta, siksi kerrotaan divisioonan tulos mennessä 2.

Valitsijan perintö

Tyylilehdessämme on ilmeisesti muutamia valintoja, joilla on samat muotoilusäännöt. Jotta vältämme toistoa koodissamme, meidän on ensin määritettävä nämä tyylit ja perittävä ne @extend tarvittaessa. Tätä menetelmää tunnetaan nimellä Sass Valitsijan perintö, erittäin hyödyllinen ominaisuus, joka puuttuu LESSistä.

 .float-left float: vasen;  .box-koon määrittäminen @include box-sizing (raja-laatikko);

tyylit

Kun kaikki tarpeellinen on asetettu, on aika tyylittää vCard-korttisi, alkaen taustaväristä HTML-asiakirjaamme;

 html korkeus: 100%; taustaväri: $ base;

vCard

Seuraavat tyylit määrittävät vCard-kääreen. Jos olet työskennellyt aiemmin LESS: n kanssa, tämä koodi on sinulle tuttu ja helppo sulattaa.

 .vcard leveys: $ leveys; marginaali: 50px auto; taustaväri: tummempi ($ base, 5%); raja: 1kpl kiinteä $ tumma; @ sis. raja-säteen (3px); ul padding: 0; marginaali: 0; li list-style: ei;

Kääreen leveys perii arvon $ leveys muuttuja. Taustaväri on tummempi 5% perusväristä, kun taas reunan väri on tummempi 10%. Tämä väritys saavutetaan Sass-väritoiminnoilla.

VCard-kortilla on myös 3px pyöristettyjen kulmien säde, joka saavutetaan kompassin CSS3-sekoittimien avulla; raja-säde (3px).

Bio-osio

Kuten tämän oppaan alussa todettiin, vCard voidaan jakaa kahteen osaan. Nämä alla olevat sisäkkäiset tyylit määrittävät ensimmäisen osan, joka sisältää kuvan profiilin, jossa on muutamia yksityiskohtia (nimi, sähköposti ja puhelin).

 .bio border-bottom: 1px kiinteä $ tumma; pehmuste: $ space; @extend .box-kokoinen; img @extend .float-left; näyttö: lohko; raja: ($ space / 4) kiinteä #ffffff;  .detail @extend .float-left; @extend .box-kokoinen; väri: tummenee ($ base, 50%); marginaali: left: $ space; pohja: $ space / 2;  leveys: $ width - (($ space * 3) + $ img); li &: ennen leveys: $ space; korkeus: $ tilaa; marginaali-oikea: $ space; font-family: "ModernPictogramsNormal";  & .name: ennen sisältö: "f";  & .email: ennen content: "m";  & .phone: ennen sisältö: "N";

Yllä olevasta koodista on yksi asia, jonka mielestämme sinun on otettava ilmoitus. Leveys vuonna .yksityiskohta valitsin on määritelty tällä yhtälöllä $ width - (($ space * 3) + $ img);.

Tätä yhtälöä käytetään yksityiskohtien laskemiseen dynaamisesti leveys vähentämällä kuvan profiilin leveys ja välilyönnit (pehmuste ja marginaali) vCard-kokonaisleveydestä.

Sosiaalinen osasto

Alla olevat tyylit koskevat vCard-kortin toista osaa. Täällä ei todellakaan ole eroa tavallisella CSS: llä, vain nyt ne ovat sisäkkäin ja muutamia arvoja määritellään muuttujilla.

 .sosiaalinen taustaväri: $ tumma; leveys: 100%; pehmuste: $ space; @extend .box-kokoinen; ul text-align: center; li näyttö: inline-block; leveys: 32px; korkeus: 32px; a text-decoration: ei mitään; näyttö: inline-block; leveys: 100%; korkeus: 100%; teksti-luetelmakohta: 100%; valkoinen-avaruus: nyt; ylivuoto piilotettu;

Tässä osiossa näytämme sosiaalisen median kuvakkeet käyttämällä kuva-sprite-tekniikkaa, ja kompassilla on ominaisuus, jolla tämä työ voidaan tehdä nopeammin.

Ensinnäkin meidän täytyy laittaa kuvakkeemme erityiseen kansioon - nimetään kansio / Sosiaaliset /, esimerkiksi. Takaisin tyylitaulukkoon yhdistä nämä kuvakkeet seuraavaan @tuonti sääntö.

 @import "social / *. png";

sosiaalinen / yllä oleva kansio viittaa kansioon, johon tallennamme kuvakkeet. Tämä kansio on sijoitettava kuvakansioon. Nyt, jos katsomme kuvakansiomme, meidän pitäisi nähdä sprite-kuva, joka on luotu satunnaishahmoilla sosiaalinen-sc805f18607.png. Tässä vaiheessa etupäässä ei ole vielä mitään, kunnes käytämme tyylejä seuraavalla rivillä.

 @ sisällyttää kaikki sosiaaliset spritit;

Lopullinen tulos

Lopuksi, kaiken kovan työn jälkeen voimme nyt nähdä tuloksen näin:

Jos ajattelemme sitä 500px on liian leveä myöhemmin, meidän tarvitsee vain muuttaa arvoa $ leveys muuttuja - esimerkiksi, 350 kuvapistettä - loput tulevat “maagisesti” säädettävä. Voit myös kokeilla värimuuttujaa.

Näytä demo
Lataa lähde

johtopäätös

Tässä opetusohjelmassa olemme osoittaneet, miten voit luoda yksinkertaisen online-vCardin Sassin ja Compassin kanssa; tämä on kuitenkin vain esimerkki. Sass ja kompassi ovat todellakin voimakkaita, mutta joskus se ei ole välttämätöntä. Esimerkiksi kun työskentelemme verkkosivulla, jolla on muutama sivu, ja luultavasti tarvitsemme vain vähemmän rivejä tyylejä, Sassin ja Compassin käyttöä pidetään liiallisena.

Tämä viesti sulkee Sass-sarjan ja toivomme, että nautit siitä. Jos sinulla on kysyttävää tästä aiheesta, älä epäröi lisätä sen alla olevaan kommentti-ruutuun.