Sass Tutorial Bygg et online vCard med Sass & Compass

 
 
  
 
 
Thoriq Firdaus
 
[email protected]
 
(+62) 1.2345.678.9
 
Kjæresten er dum og sitter, og er med på å hjelpe. Suspendisse dolor neque, eleifend på pellentesque quis, er det bare å si noe. Etiam og auktor arcu.
 
 
 
 
 
 
Facebook
 
 Twitter
 
Google+
 
Dribbble
 
 
 
 

Som du kan se ovenfor, inkluderes de sosiale identitetene i "sosiale"delen er strukturert innenfor listelementer, slik at vi enkelt kan vise dem side om side. Hver av dem får et klassenavn som følger denne konvensjonen sosial facebook, sosial-twitter, sosial-google og så videre.

Kompasskonfigurasjon

Vi må konfigurere Kompass litt ved å ikke kommentere noen linjer inn config.rb fil, som følger:

 # Du kan velge din foretrukne utgangsstil her (kan overstyres via kommandolinjen): output_style =: expanded # For å aktivere relative stier til eiendeler via kompasshjelpfunksjoner. Uncomment: relative_assets = true # For å deaktivere feilsøkings kommentarer som viser den opprinnelige plasseringen til seleksjonene dine. Uncomment: line_comments = false 

Hvis du ikke finner config.rb fil, har du sannsynligvis ikke kjørt denne kommandoen kompass init i prosjektkatalogen din.

Importerer filer

Siden vi skal bruke kompass, må vi importere den ved hjelp av;

 @import "kompass"; 

Og det er min personlige preferanse å tilbakestille standardstiler fra nettleserne, slik at utgangen blir gjengitt mer konsekvent. Kompass, i dette tilfellet, har en Reset-modul. Denne modulen er basert på Eric Meyers CSS reset og kan importeres ved hjelp av;

 @import "kompass / reset"; 

Imidlertid foretrekker jeg å normalisere det som heldigvis kommer også i Sass / Scss format. Last ned filen her, lagre den inn sass arbeidskatalog og importere den til stilarket.

 @import "normalisere"; 

Anbefalt lesing: Gjennomgå CSS Style Priority Level

variabler

Vi vil sikkert ha noen konstante verdier i stilarket, slik at vi lagrer dem i variabler, og disse to variablene nedenfor vil definere grunnfargene på vCard-kortet vårt.

 $ base: #fff; $ mørk: mørkere ($ base, 10%); 

Mens $ bredde Variabel under er vår side bredde; Det vil også være grunnlaget for å definere andre elementstørrelser.

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

Og $ plass variabel, som du kan se, vil være standardavstanden eller kolonnestørrelsen i vårt vCard som i dette eksemplet ville være 20px;

Kompass har også hjelpere til å oppdage bildestørrelsen, og vi vil benytte denne funksjonen på vår bildeprofil, som følger;

 $ img: bildebredde ("me.jpg") + (($ plass / 4) * 2); 

Den ekstra Addisjon av (($ space / 4) * 2) i koden ovenfor, er å beregne total bildebredde inkludert grensen som vil ramme bildet. En ramme har vanligvis to sider; øverst og nederst / venstre og høyre, det er derfor vi multipliserer divisjon resultat av 2.

Selector Arv

Det er tilsynelatende noen få valgmuligheter i stilarket som vil ha samme stylingsregler. For å unngå repetisjon i vår kode, må vi spesifisere disse stilene i utgangspunktet og arve dem med @forlenge direktiv når det trengs. Denne metoden, i Sass, er kjent som Selector Arv, en veldig nyttig funksjon som mangler i mindre.

 .float-left float: left;  .box-størrelse @ include box-size (grense-boks);  

Styles

Når alt som er nødvendig, har vært oppsett, så er det på tide å stillegge vCardet vårt, og starter med en bakgrunnsfarge til vårt HTML-dokument.

 html høyde: 100%; bakgrunnsfarge: $ base;  

vCard

Følgende stiler definerer vCard wrapper. Hvis du har jobbet med MINDRE tidligere, vil denne koden være kjent for deg og lett å fordøye.

 .vcard bredde: $ width; margin: 50px auto; bakgrunnsfarge: mørkere ($ base, 5%); grense: 1px solid $ dark; @include border-radius (3px); ul polstring: 0; margin: 0; li listestil: none;  

Innpakningens bredde arver verdien fra $ bredde variabel. Bakgrunnsfargen er mørkere av 5% fra basen farge, mens grensen fargen vil bli mørkere av 10%. Denne fargingen oppnås ved å bruke Sass fargefunksjoner.

VCard vil også ha 3px radius av avrundede hjørner som oppnås ved å bruke Compass CSS3 Mixins; border-radius (3px).

Bio-seksjon

Som vi har notert tidlig i denne opplæringen, kan vCard deles inn i to seksjoner. Disse nestede stilene nedenfor vil definere den første delen som inneholder bildeprofilen med noen detaljer (navn, e-post og telefon).

 .bio border-bottom: 1px solid $ dark; polstring: $ space; @extend .box-dimensjonering; img @extend .float-left; skjerm: blokk; grense: ($ space / 4) solid #ffffff;  .detail @extend .float-left; @extend .box-dimensjonering; farge: mørkere ($ base, 50%); margin: left: $ space; bunn: $ space / 2;  bredde: $ bredde - (($ plass * 3) + $ img); li &: før bredde: $ space; høyde: $ space; margin-høyre: $ space; font-familie: "ModernPictogramsNormal";  & .name: før innhold: "f";  & .email: før innhold: "m";  & .phone: før innhold: "N";  

Det er en ting fra koden ovenfor som vi tror du må ta en melding om. Bredden i .detalj velgeren er spesifisert med denne ligningen $ bredde - (($ plass * 3) + $ img);.

Denne ligningen brukes til å beregne detaljene dynamisk bredde ved å trekke bildeprofilbredden og mellomromene (polstring og margin) fra vCard totalbredden.

Sosial seksjon

Stilene nedenfor er for den andre delen i vCard. Det er faktisk ingen forskjell med vanlig CSS her, bare nå er de nestet, og noen få verdier er definert med variabler.

 .sosial bakgrunnsfarge: $ mørk; bredde: 100%; polstring: $ space; @extend .box-dimensjonering; ul text-align: center; li display: inline-block; bredde: 32px; høyde: 32px; en tekst-dekorasjon: ingen; display: inline-block; bredde: 100%; høyde: 100%; tekstinnhold: 100%; white-space: nowrap; overløp: skjult;  

I denne delen vil vi vise ikonene for sosiale medier ved hjelp av bildet sprite teknikken, og Compass har en funksjon for å gjøre jobben raskere.

Først av alt, må vi sette våre ikoner i en spesiell mappe - la oss navngi mappen /sosial/, for eksempel. Tilbake i stilarket, sammenkoble disse ikonene med følgende @importere regel.

 @import "sosialt / * .png"; 

De sosial/ ovenfor refererer til mappen der vi lagrer ikonene. Denne mappen skal være nest i bildemappen. Nå, hvis vi tar en titt på vår bildemappe, bør vi se et spritbilde generert med tilfeldige tegn, som sosial-sc805f18607.png. På dette punktet skjer det ikke noe fremre, til vi bruker stilene med den følgende linjen.

 @ inkludere alle sosial-sprites; 

Endelig resultat

Til slutt, etter alt hardt arbeid, kan vi nå se resultatet slik:

I tilfelle vi tror det 500px er for bred senere, vi trenger bare å endre verdien i $ bredde variabel - for eksempel, 350 piksler - resten vil “magisk” justeres. Du kan også eksperimentere med fargevariabelen.

• Se demo
• Last ned kilde

Konklusjon

I denne opplæringen har vi vist deg hvordan du bygger et enkelt online vCard med Sass og Compass; dette er bare et eksempel. Sass og Compass er faktisk kraftige, men noen ganger er det ikke nødvendig. For eksempel, når vi jobber på et nettsted med noen få sider og sannsynligvis også bare trenger færre linjer med stiler, blir Sass og Compass ansett for høy.

Dette innlegget lukker vår Sass-serie, og vi håper du likte det. Hvis du har spørsmål angående dette emnet, ikke nøl med å legge det til i kommentarfeltet under.