Sass Tutorial Construirea unui vCard online cu Sass & Compass

 
 
  
 
 
Thoriq Firdaus
 
[email protected]
 
(+62) 1.2345.678.9
 
Lorem ipsum dolor stați amet, consectetur adipiscing elit. Suspendisse dolor neque, selectați la quis pellentesque, convallis sit amet tellus. Etiam et auctor arcu.
 
 
 
 
 
 
Facebook
 
 Stare de nervozitate
 
Google+
 
Dribbble
 
 
 
 

După cum puteți vedea mai sus, identitățile sociale incluse în categoria "socială"secțiunea este structurată în cadrul elementelor din listă, astfel încât să le putem afișa cu ușurință una lângă alta. Fiecare dintre ele are un nume de clasă în urma acestei convenții social-facebook, social-twitter, social-google si asa mai departe.

Compass Configuration

Trebuie să configuram Compass un pic, necomentând câteva linii în config.rb dosar, după cum urmează:

 # Puteți selecta stilul dvs. de ieșire preferat aici (poate fi anulat prin linia de comandă): output_style =: expanded # Pentru a activa căile relative la active prin intermediul funcțiilor ajutorului busolei. Dezactivați: relative_assets = true # Pentru a dezactiva comentariile de depanare care afișează locația inițială a selectorilor. Dezactivați: line_comments = false 

Dacă nu puteți găsi config.rb fișier, probabil că nu ați executat această comandă bus init în directorul de proiect.

Importul fișierelor

Deoarece vom folosi Compass, trebuie să-l importăm folosind;

 @import "busola"; 

Iar preferința mea personală este de a reseta stilurile implicite din browsere, astfel încât ieșirea să fie redată mai consistent. Compasul, în acest caz, are un modul Reset. Acest modul se bazează pe resetarea CSS a lui Eric Meyer și poate fi importat utilizând;

 @import "busola / reset"; 

Cu toate acestea, prefer să folosesc Normalize că din fericire vine și în format Sass / Scss. Descărcați fișierul aici, salvați-l în Sass directorul de lucru și îl importați în foaia de stil.

 @import "normalize"; 

Recomandat lectură: Revizuirea nivelului de prioritate al stilului CSS

variabile

Cu siguranță vom avea câteva valori constante în foaia de stil, astfel încât le vom stoca în variabile și aceste două variabile de mai jos vor defini culoarea de bază a vCard-ului nostru.

 $ base: #fff; $ întuneric: întunecat ($ base, 10%); 

In timp ce $ lățime variabila mai jos va fi lățimea paginii noastre; acesta va fi, de asemenea, baza pentru definirea altor dimensiuni ale elementelor.

 $ lățime: 500px; $ spațiu: $ lățime / 25; // = 20px 

Si spațiu $ variabila, după cum puteți vedea, va fi spațiul implicit sau dimensiunea coloanei în vCard-ul nostru, care ar fi în acest exemplu 20px;

Compass are, de asemenea, Helpers pentru a detecta dimensiunea imaginii și vom folosi această caracteristică în profilul nostru de imagini, după cum urmează;

 $ img: lățimea imaginii ("me.jpg") + ((spațiu / 4) * 2); 

În plus Plus de (($ spațiu / 4) * 2) în codul de mai sus, este de a calcula lățimea totală a imaginii, inclusiv marginea care va încadra imaginea. Un cadru are în general două laturi; sus și jos / stânga și dreapta, de aceea noi înmulțim divizare rezultat de 2.

Selector de moștenire

Există aparent câteva selectori în foaia de stil care vor avea aceleași reguli de styling. Pentru a evita repetarea în codul nostru, va trebui să specificăm aceste stiluri în primul rând și să le moștenim cu @extinde atunci când este necesar. Această metodă, în Sass, este cunoscută sub numele de Selector de moștenire, o caracteristică foarte utilă care lipsește în LESS.

 .float-left float: left;  .box-size @ include dimensiunea cutiei (border-box);  

stiluri

Când a fost setat tot ce este necesar, atunci este timpul să ne stilizăm vCard-ul, pornind de la o culoare de fundal pentru documentul nostru HTML;

 html înălțime: 100%; fundal-culoare: $ base;  

vCard

Următoarele stiluri definesc ambalajul vCard. Dacă ați lucrat cu mai puțin anterior, acest cod vă va fi cunoscut și ușor de digerat.

 .vcard lățime: $ lățime; margine: 50 pixeli automat; fundal-culoare: întunecat ($ base, 5%); frontieră: 1px solid $ întunecat; @ include raza de graniță (3px); ul padding: 0; marja: 0; li style-style: none;  

Lățimea învelișului moștenește valoarea de la $ lățime variabil. Culoarea fundalului este mai închisă 5% de la culoarea de bază, în timp ce culoarea frontală va fi mai închisă 10%. Această colorare este realizată utilizând funcțiile de culoare Sass.

VCard-ul va fi, de asemenea 3px raza de colțuri rotunjite care este realizată utilizând mixerele Compass CSS3; border-radius (3px).

Secțiunea Bio

Așa cum am remarcat la începutul acestui tutorial, vCard-ul poate fi împărțit în două secțiuni. Aceste stiluri imbricate de mai jos vor defini prima secțiune care conține profilul imaginii cu câteva detalii (nume, e-mail și telefon).

 .bio margin-bottom: 1px solid $ întunecat; padding: $ space; @ extend .box-sizing; img @extend .float-stânga; afișare: bloc; frontieră: ($ spațiu / 4) solid #ffffff;  .detail @extend .float-left; @ extend .box-sizing; culoare: întunecat ($ base, 50%); margine: stânga: $ spațiu; fund: $ spațiu / 2;  lățime: $ lățime - (($ spațiu * 3) + $ img); li &: înainte de width: $ space; înălțime: $ spațiu; margin-dreapta: $ spațiu; font-family: "ModernPictogramsNormal";  & .name: înainte de content: "f";  & .email: înainte de content: "m";  & .phone: înainte de content: "N";  

Există un singur lucru din codul de mai sus, care credem că trebuie să faceți o notificare. Lățimea în .detaliu selectorul este specificat cu această ecuație $ lățime - (($ spațiu * 3) + $ img);.

Această ecuație este utilizată pentru a calcula dinamic detaliile lăţime prin scăderea lățimii profilului imaginii și a spațiilor (umplutură și margine) din lățimea totală a vCard-ului.

Secțiunea socială

Stilurile de mai jos sunt pentru cea de-a doua secțiune din vCard. De fapt, nu există nici o diferență cu CSS simplu aici, numai acum sunt imbricate și câteva valori sunt definite cu variabile.

 .sociale fundal-culoare: $ întuneric; lățime: 100%; padding: $ space; @ extend .box-sizing; ul text-aliniere: centru; li display: inline-block; lățime: 32px; înălțime: 32px; a text-decoration: none; afișare: inline-block; lățime: 100%; înălțime: 100%; text-liniuță: 100%; spațiu alb: acum; overflow: ascuns;  

În această secțiune, vom afișa icoanele media sociale folosind tehnica imaginii sprite, iar Compass are o caracteristică pentru a face acest lucru mai repede.

Mai întâi de toate, trebuie să punem pictogramele noastre într-un dosar special - să numim dosarul /social/, de exemplu. Înapoi în foaia de stil, concatenați aceste pictograme cu următoarele @import regulă.

 @import "social / * .png"; 

social/ de mai sus se referă la dosarul în care stocăm pictogramele. Acest director trebuie să fie imbricat în dosarul imagine. Acum, dacă aruncăm o privire în dosarul nostru de imagini, ar trebui să vedem o imagine sprite generată cu caractere aleatoare, cum ar fi social-sc805f18607.png. În acest moment, nimic nu se întâmplă încă la front-end, până când aplicăm stilurile cu următoarea linie.

 @ include toate spritele sociale; 

Rezultat final

În cele din urmă, după toată munca grea, putem vedea rezultatul astfel:

În cazul în care ne gândim asta 500px este prea largă mai târziu, trebuie doar să schimbăm valoarea în $ lățime variabilă - de exemplu, 350px - restul va “magic” fi ajustat. De asemenea, puteți experimenta cu variabila de culoare.

• Vizualizați demonstrația
• Descărcați sursa

Concluzie

În acest tutorial v-am arătat cum să construiți un simplu vCard online cu Sass și Compass; acesta este doar un exemplu. Sass și Compass sunt într-adevăr puternice, dar uneori nu este necesar. De exemplu, atunci când lucrăm la un site web cu câteva pagini și probabil că vom avea nevoie de mai puține linii de stiluri, utilizarea Sass și Compass este considerată excesivă.

Acest post închide seria noastră Sass și sperăm că vă place. Dacă aveți întrebări cu privire la acest subiect, nu ezitați să o adăugați în caseta de comentarii de mai jos.