Sassi juhendaja Online-vCard-i loomine Sass & Compassiga

Täna jätkame arutelu Sassiga ja see on meie Sass-sarja viimane osa. Seekord on see teoreetilise lähenemise asemel natuke praktilisem. Loome Sassiga koos Compassiga online-vCard.

Idee seisneb selles, et vCard peaks olema lihtsalt reguleeritav, värvi ja suuruse jaoks. Protsessis kasutame mõningaid Sass ja Compass funktsioone, nagu näiteks Muutujad, segud, operatsioonid, valijate pärand, sisestatud reeglid ja Kompassi abilised. Kui olete selle seeria eelmistest postitustest unustanud, soovitame teil neid enne jätkamist vaadata.

Planeerimine ja trükkimine

Sass ja Compassiga töötamisel, planeerimine on hädavajalik. Me peame tavaliselt saama suure pildi sellest, kuidas meie lõpptulemus (nt leht või veebileht) saab olema. Ideede jaoks on kasulik sirvida mõningaid saite nagu Behance või Dribbble. Seejärel saame ideed koostada paberile või ehitada selle traatvõrgust, nagu allpool olev näide.

Nagu näete ülaltoodud pildist, sisaldab meie vCard kontaktinfo John'i kohta - pildiprofiil, mõned andmed Johni kohta, näiteks tema nimi, e-posti aadress, telefoninumber ja lühike kirjeldus selle kohta, kes ta on või mida ta teeb. See on meie "bio" osa.

Allpool on tema sotsiaalsed identiteedid sotsiaalsete nuppude kujul. See on meie sotsiaalne osa.

Varade ettevalmistamine

Enne kodeerimise alustamist on siin mõned olulised ettevalmistused. Ma kogun, et nüüd peaksite Sass ja Compass teie arvutisse installima.

(Kui te pole kindel, kas olete need installinud, saate selle käsu käivitada sass -v või kompass -v läbi Käsuviip või terminal või, saate alati kasutada rakendust, nagu Scout App, kui soovite töötada GUI-ga.)

Meil on vaja ka mõningaid varasid, näiteks fontide ikoone ja sotsiaalse meedia ikoone, mida saate sellistest kohtadest nagu ModernPictograms.

Lõpuks, kuna me kasutame selle juhendi jaoks käsuviiba / terminali, peame navigeerima meie kataloogi ja käivitama Compass projekti nende kahe käsuga: kompassi init ja kompassikell.

HTML-i märgistus

Allpool on meie vCard-i HTML-märgistus, see on üsna lihtne. Kõik sektsioonid on pakitud loogilise HTML5-sildi alla

      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
  Twitter
 Google+
 Dribbble

Nagu näete eespool, on sotsiaalse identiteedi hulka kuulunudJaotis on struktureeritud nimekirjas elementide kaupa, et saaksime neid hõlpsasti kõrvuti kuvada. Igaühele neist antakse selle konventsiooni järgi klassi nimi sotsiaalne-facebook, sotsiaal-twitter, sotsiaal-google ja nii edasi.

Kompassi seadistamine

Me peame Kompassi konfigureerima natuke, jättes mõne rea sisse config.rb faili:

 # Siin saab valida oma eelistatud väljundstiili (seda saab käsurealt tühistada): output_style =: expanded # Võimaldab suhteliste teede lubamist kompassi abistaja funktsioonide kaudu. Uncomment: santyk_assets = true # Valikuvõimaluse kommentaaride keelamiseks, mis näitavad teie valikute algset asukohta. Uncomment: line_comments = false

Kui te ei leia config.rb faili pole ilmselt käskinud kompassi init oma projektikataloogis.

Failide importimine

Kuna me kasutame Compassi, peame seda kasutama;

 @import "kompass";

Ja minu isiklik eelistus on lähtestada brauserite vaikimisi stiilid, et väljund oleks järjepidevam. Sellisel juhul on kompassil Reset-moodul. See moodul põhineb Eric Meyeri CSS-i lähtestamisel ja seda saab importida kasutades;

 @import "kompass / reset";

Samas eelistaksin Normaliseerimist seda õnneks kasutada ka Sass / Scss formaadis. Lae fail siia, salvestage see sass töökausta ja importige see meie laaditabelisse.

 @import "normaliseerima";

Soovitatav lugemine: CSS-stiili prioriteeditaseme läbivaatamine

Muutujad

Kindlasti on meilitabelil mõned konstantsed väärtused, seega salvestame need muutujatesse ja need kaks allpool olevat muutujat määravad meie vCard-i põhivärvi.

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

Samal ajal kui $ laius allpool olev muutuja on meie lehe laius; see on ka teiste elementide suuruse määratlemise alus.

 $ laius: 500 px; $ space: $ width / 25; // = 20x

Ja $ space muutuja, nagu näete, on meie vCard-i vaikesamm või veeru suurus, mis selles näites oleks 20tk;

Kompassil on ka abivahendid kujutise suuruse tuvastamiseks ja me kasutame seda funktsiooni meie pildiprofiilil järgmiselt;

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

Täiendav Lisamine of (($ space / 4) * 2) Ülaltoodud koodis on arvutada kogu pildi laius koos piiriga, mis pildistab pilti. Raamil on üldiselt kaks külge; ülemine ja alumine / vasak ja parem, sellepärast me korrutame jagunemise tulemus kõrval 2.

Valija pärand

Meie stiililehel on ilmselt mõned valijad, kellel on samad stiilieeskirjad. Koodide kordumise vältimiseks peame need stiilid kõigepealt täpsustama ja need pärima @extend vajaduse korral direktiivi. See meetod on Sassis tuntud kui Valija pärand, väga kasulik funktsioon, mis puudub LESSis.

 .float-left float: vasakule;  .box-suuruse määramine @include box-sizing (piirikast);

Stiilid

Kui kõik on vajalik, siis on aeg kujundada meie vCard, alustades taustavärvist meie HTML-dokumendiga;

 html kõrgus: 100%; taustavärv: $ base;

vCard

Järgmised stiilid määravad vCard ümbrise. Kui olete varem töötanud LESSiga, on see kood teile tuttav ja kergesti seeditav.

 .vcard laius: $ laius; marginaal: 50px auto; taustavärv: tumedam ($ base, 5%); piir: 1px tahke $ tume; @ sisaldab ka raadiust (3px); ul polster: 0; varu: 0; li list-style: no;

Pakendi laius pärineb väärtusest $ laius muutuja. Taustavärv on tumedam 5% põhivärvist, samas kui piiri värv on tumedam 10%. See värvus saavutatakse Sass värvi funktsioonide abil.

VCard on ka 3px ümarate nurkade raadius, mis saavutatakse kompassi CSS3 segude abil; raadius (3x).

Bio jagu

Nagu oleme selle juhendaja alguses märkinud, võib vCard jagada kaheks osaks. Need allpool olevad sisestatud stiilid määravad esimese osa, mis sisaldab pildiprofiili koos mõne detailiga (nimi, e-post ja telefon).

 .bio border-bottom: 1px tahke $; polsterdus: $ space; @extend .box-suurus; img @extend .float-left; kuva: plokk; piir: ($ space / 4) tahke #ffffff;  .detail @extend .float-left; @extend .box-suurus; värvus: tumeneb ($ base, 50%); marginaal: left: $ space; alt: $ space / 2;  laius: $ width - (($ space * 3) + $ img); li &: enne width: $ space; kõrgus: $ space; margin-right: $ space; font-family: "ModernPictogramsNormal";  & .name: enne sisu: "f";  & .email: enne content: "m";  & .phone: enne sisu: "N";

Ülaltoodud koodist on üks asi, mida me arvame, et peate teate võtma. Laius on .üksikasjalikult Valija valitakse selle võrrandiga $ width - (($ space * 3) + $ img);.

Seda võrrandit kasutatakse detailide dünaamiliseks arvutamiseks laius lahutades pildiprofiili laiuse ja tühikud (polster ja marginaal) vCard-i kogulaiusest.

Sotsiaalne sektsioon

Alltoodud stiilid on mõeldud vCard-i teisele osale. Siin ei ole siin tavalise CSS-iga tegelikult mingit vahet, vaid nüüd on nad sisestatud ja mõned väärtused on määratletud muutujatega.

 .sotsiaalne taustavärv: $ tume; laius: 100%; polsterdus: $ space; @extend .box-suurus; ul text-align: center; li kuva: inline-block; laius: 32x; kõrgus: 32x; a text-decoration: no; kuva: inline-block; laius: 100%; kõrgus: 100%; tekst-taane: 100%; valge-ruum: nihutamine; ülevool: peidetud;

Selles peatükis kuvame sotsiaalse meedia ikoone kujutise sprite tehnikaga ja kompassil on funktsioon, mis võimaldab seda tööd kiiremini teha.

Esiteks peame panema oma ikoonid spetsiaalsesse kausta - nimetagem kaust / sotsiaalne /, näiteks. Tagasi stiilitabelisse, ühendage need ikoonid järgnevaga @import reegel.

 @import "social / *. png";

The sotsiaalne / Ülaltoodud viitab kaustale, kus me ikoonid salvestame. See kaust peaks olema kantud pildikausta. Nüüd, kui me vaatame oma pildikataloogis, peaksime nägema juhuslike märkidega loodud sprite kujutist social-sc805f18607.png. Siinkohal ei juhtu mitte mingit ikka veel esiosas, kuni me rakendame stiilid järgmise reaga.

 @ sisaldab kõiki sotsiaalseid spriide;

Lõplik tulemus

Lõpuks, pärast kõva tööd, näeme nüüd sellist tulemust:

Kui me seda arvame 500tk on hiljem liiga lai, peame ainult väärtust muutma $ laius muutuja - näiteks, 350tk - ülejäänud tahab “maagiliselt” kohandada. Samuti saate katsetada värvimuutujaga.

Kuva demo
Allalaadimise allikas

Järeldus

Selles juhendis oleme teile näidanud, kuidas luua lihtne online vCard koos Sass ja Compass; see on aga vaid näide. Sass ja kompass on tõesti võimas, kuid mõnikord ei ole see vajalik. Näiteks, kui töötame mõne leheküljega veebisaidil ja vajame tõenäoliselt ka vähem stiilide ridu, peetakse Sass'i ja Compassi kasutamist ülemääraseks.

See postitus sulgeb meie Sass-seeria ja loodame, et see meeldis. Kui teil on selle teema kohta küsimusi, lisage see allpool olevasse märkeruutu.