Sass Tutorial Izgradnja online vCard s Sass & Compass

Danas ćemo nastaviti raspravu o Sassu i to će biti završni dio naše Sass serije. Ovaj put, umjesto teorijskog pristupa, ovo će biti malo praktičnije. Izradit ćemo online vCard pomoću Sass-a zajedno s kompasom.

Ideja je da vCard mora biti lako prilagodljiv, za boju i veličinu. U tom procesu koristit ćemo nekoliko Sass i Compass značajki Varijable, mješavine, operacije, nasljeđivanje selektora, ugrađena pravila i Pomagači kompasa. Ako ste propustili prethodne postove iz ove serije, predlažemo da ih pogledate prije nastavka.

Planiranje i ožičenje

Kada radite sa Sassom i Compassom, planiranje je bitno. Obično trebamo imati široku sliku o tome kako će biti konačni rezultat (npr. Stranica ili web-lokacija). Bilo bi korisno pregledavati neke web-lokacije kao što su Behance ili Dribbble za ideje. Tada možemo nacrtati ideje na papiru ili ih konstruirati u žičanom okviru, kao što je ovaj primjer u nastavku.

Kao što možete vidjeti na gornjoj slici, naša vCard sadrži kontaktne informacije o "Ivanu" - profilu slike, nekim informacijama o Johnu, kao što su njegovo ime, adresa e-pošte, broj telefona i kratak opis o tome tko je on i što radi. To će biti naš 'bio' dio.

U nastavku su njegovi društveni identiteti u obliku društvenih gumba. To će biti naš 'socijalni' dio.

Priprema imovine

Prije nego što počnemo kodirati, evo nekoliko bitnih stvari za pripremu. Shvaćam da ste do sada trebali imati Sass i Compass instalirane na vašem računalu.

(Ako niste sigurni jeste li ih instalirali, možete pokrenuti ovu naredbu sass -v ili kompas -v kroz Naredbeni redak ili terminal ili, uvijek možete koristiti aplikaciju kao što je Scout App ako vam je draže raditi s grafičkim korisničkim sučeljem.)

Također ćemo trebati nekoliko sredstava kao što su ikone fontova i ikone društvenih medija, koje možete dobiti od mjesta kao što su ModernPictograms.

Konačno, budući da koristimo Command Prompt / Terminal za ovaj vodič, trebamo otići do našeg direktorija i pokrenuti Compass projekt s ove dvije naredbe: kompas init i sat kompasa.

HTML oznaka

U nastavku je HTML oznaka za našu vCard, prilično je jednostavna. Svi su dijelovi omotani unutar logičke HTML5 oznake

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

Kao što možete vidjeti gore, društveni identiteti uključeni u 'društvenu'odjeljak je strukturiran unutar elemenata popisa kako bismo ih lako mogli prikazati rame uz rame. Svako od njih dobiva naziv klase koji slijedi ovu konvenciju društveno-facebook, društveno-twitter, društveno-google i tako dalje.

Konfiguracija kompasa

Kompas trebamo malo konfigurirati unkommentiranjem nekoliko redaka u config.rb datoteka, kako slijedi:

 # Ovdje možete odabrati željeni stil izlaza (može se nadjačati putem naredbenog retka): output_style =: expanded # Da biste omogućili relativne putove do sredstava putem pomoćnih funkcija kompasa. Uncomment: relative_assets = true # Da biste onemogućili komentare za otkrivanje pogrešaka koje prikazuju izvornu lokaciju vaših selektora. Ukloni komentar: line_comments = false

Ako ne možete pronaći config.rb datoteku, vjerojatno niste pokrenuli ovu naredbu kompas init u imeniku projekta.

Uvoz datoteka

Budući da ćemo koristiti kompas, moramo ga uvesti koristeći;

 @import "kompas";

Moje osobne sklonosti su poništavanje zadanih stilova iz preglednika, tako da će izlaz biti konzistentniji. Kompas, u ovom slučaju, ima modul Reset. Ovaj se modul temelji na resetiranju CSS-a Erica Meyera i može se uvesti pomoću;

 @ import "kompas / reset";

Međutim, ja radije koristiti Normalize da thankfully također dolazi u Sass / Scss formatu. Preuzmite datoteku ovdje, spremite je u Sass radni direktorij i uvezite ga u naš stilski list.

 @ uvoz "normalizirati";

Preporučeno čitanje: Pregled razine prioriteta CSS-a

Varijable

Svakako ćemo imati nekoliko konstantnih vrijednosti u stilu, tako da ćemo ih pohraniti u varijable i ove dvije varijable će definirati osnovnu boju naše vCard..

 $ base: #fff; $ tamno: potamni ($ base, 10%);

Dok širina $ varijabla ispod će biti širina naše stranice; ona će također biti temelj za definiranje drugih veličina elemenata.

 $ širina: 500px; $ prostora: $ width / 25; // = 20px

I $ prostor varijabla, kao što možete vidjeti, bit će zadani razmak ili veličina stupca u našoj vCard, što bi u ovom primjeru bilo 20px;

Kompas također ima pomagače za otkrivanje veličine slike i mi ćemo iskoristiti ovu značajku na našem profilu slike, kako slijedi;

 $ img: širina slike ("me.jpg") + (($ space / 4) * 2);

Dodatni Dodatak od (($ space / 4) * 2) u gornjem kodu, je izračunati ukupnu širinu slike, uključujući i rub koji će uokviriti sliku. Okvir općenito ima dvije strane; gore i dolje / lijevo i desno, zato umnožavamo rezultat podjele po 2.

Nasljeđivanje selektora

Očito postoji nekoliko selektora u našoj stilskoj tablici koji će imati ista pravila oblikovanja. Kako bismo izbjegli ponavljanje u našem kodu, morat ćemo najprije odrediti te stilove i naslijediti ih s @extend kad god je to potrebno. Ta je metoda u Sassu poznata kao Nasljeđivanje selektora, vrlo korisna značajka koja nedostaje u MANJE.

 .float-left float: lijevo;  .box-sizing @include box-sizing (granični okvir);

Stilovi

Kada je sve što je potrebno je postavljen, onda je vrijeme da stil naše vCard, počevši s pozadinom u naš HTML dokument;

 html visina: 100%; pozadinska boja: $ base;

vCard

Sljedeći stilovi definiraju omot vCard. Ako ste ranije radili s LESS-om, ovaj kod će vam biti poznat i lako ga ćete probaviti.

 .vcard width: $ width; margina: 50px auto; boja pozadine: potamni ($ base, 5%); granica: 1px solid $ dark; @ uključite granični radijus (3px); ul punjenje: 0; margina: 0; li list-style: ništa;

Širina omotača nasljeđuje vrijednost od širina $ promjenjiva. Boja pozadine je tamnija 5% od osnovne boje, dok će boja obruba biti tamnija 10%. Ova boja se postiže korištenjem Sass funkcija boja.

VCard će također imati 3px radijus zaobljenih kutova koji se postiže pomoću Compass CSS3 Mixins; granična radijus (3px).

Bio sekcija

Kao što smo već ranije spomenuli, vCard se može podijeliti u dva dijela. Ovi ugniježđeni stilovi u nastavku definiraju prvi odjeljak koji sadrži profil slike s nekoliko pojedinosti (ime, e-pošta i telefon).

 .bio border-bottom: 1px solid $ dark; padding: $ prostor; @extend .box-sizing; img @extend .float-lijevo; prikaz: blok; border: ($ space / 4) solid #ffffff;  .detail @extend .float-lijevo; @extend .box-sizing; boja: potamni ($ baza, 50%); margina: lijevo: $ prostor; dno: $ space / 2;  širina: $ width - (($ space * 3) + $ img); li &: prije width: $ space; visina: $ prostor; margin-right: $ prostor; obitelj fonta: "ModernPictogramsNormal";  & .name: prije content: "f";  & .email: prije sadržaj: "m";  & .phone: prije sadržaj: "N";

Iz gornjeg koda postoji jedna stvar za koju mislimo da trebate uzeti obavijest. Širina u .detalj S ovom jednadžbom određuje se selektor $ width - (($ space * 3) + $ img);.

Ova se jednadžba koristi za dinamičko izračunavanje detalja širina oduzimanjem širine profila slike i razmaka (padding i margin) od ukupne širine vCard.

Socijalni odjel

Dolje navedeni stilovi odnose se na drugi odjeljak vCard. Ovdje zapravo nema razlike s običnim CSS-om, samo su sada ugniježđene, a nekoliko vrijednosti je definirano s varijablama.

 .društvena pozadinska boja: $ tamna; širina: 100%; padding: $ prostor; @extend .box-sizing; ul text-align: centar; li display: inline-block; širina: 32px; visina: 32px; a text-decoration: none; prikaz: inline-blok; širina: 100%; visina: 100%; text-indent: 100%; bijeli prostor: nowrap; preljev: skriven;

U ovom odjeljku prikazat ćemo ikone društvenih medija pomoću tehnike sprite slike, a Compass ima značajku koja brže obavlja taj posao.

Prije svega, trebamo staviti naše ikone u posebnu mapu - dajte ime mapi / Socijalna /, na primjer. Natrag u slogovima, spojite te ikone sa sljedećim @uvoz Pravilo.

 @import "socijalni / *. png";

socijalna / gore se odnose na mapu u kojoj spremamo ikone. Ta bi mapa trebala biti ugniježđena u mapu sa slikama. Sada, ako pogledamo u našoj slikovnoj mapi, trebamo vidjeti sliku duhova generiranu slučajnim znakovima, kao što je društveno-sc805f18607.png. U ovom trenutku, ništa se još uvijek ne događa na front-end dok ne primijenimo stilove na sljedeći redak.

 @ uključiti sve-društvene duhove;

Konačni rezultat

Konačno, nakon napornog rada sada možemo vidjeti rezultat kao što je ovaj:

U slučaju da tako mislimo 500px kasnije je preširoko, samo trebamo promijeniti vrijednost u širina $ varijabla - na primjer, 350px - ostatak će “magično” podesiti. Također možete eksperimentirati s varijablom boje.

Prikaži demo
Preuzimanje izvora

Zaključak

U ovom tutorialu pokazali smo vam kako izgraditi jednostavnu vCard s Sassom i Compassom; ovo je samo primjer. Sass i Compass su doista moćni, ali ponekad to nije potrebno. Na primjer, kada radimo na web-lokaciji s nekoliko stranica i vjerojatno će vam trebati samo manje redaka stilova, korištenje Sassa i Compasa smatra se pretjeranim.

Ovaj post zatvara Sass seriju i nadamo se da ste uživali. Ako imate bilo kakvih pitanja u vezi s ovom temom, slobodno je dodajte u okvir za komentare ispod.