Sass Tutorial Costruire una vCard online con Sass & Compass

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

Come puoi vedere sopra, le identità sociali incluse nel "social"la sezione è strutturata all'interno degli elementi dell'elenco in modo che possiamo visualizzarli facilmente fianco a fianco. A ognuno di loro viene assegnato un nome di classe seguendo questa convenzione social-facebook, social-twitter, socio-google e così via.

Configurazione della bussola

Abbiamo bisogno di configurare Compass un po 'decommentando alcune righe in config.rb file, come segue:

 # È possibile selezionare qui lo stile di output preferito (può essere sovrascritto tramite la riga di comando): output_style =: expanded # Per abilitare i percorsi relativi alle risorse tramite le funzioni di aiuto della bussola. Decommentazione: relative_assets = true # Per disabilitare i commenti di debug che visualizzano la posizione originale dei selettori. Decommentazione: line_comments = false 

Se non riesci a trovare config.rb file, probabilmente non hai eseguito questo comando bussola init nella directory del tuo progetto.

Importazione di file

Dal momento che useremo Compass, dobbiamo importarlo usando;

 @import "bussola"; 

Ed è la mia preferenza personale per ripristinare gli stili predefiniti dai browser in modo che l'output sia reso in modo più coerente. Bussola, in questo caso, ha un modulo di reset. Questo modulo si basa sul reset CSS di Eric Meyer e può essere importato usando;

 @import "bussola / ripristina"; 

Tuttavia, preferisco usare Normalize per fortuna arriva anche in formato Sass / Scss. Scarica il file qui, salvalo insolenza directory di lavoro e importarlo nel nostro foglio di stile.

 @import "normalizza"; 

Lettura consigliata: Revisione del livello di priorità dello stile CSS

variabili

Certamente avremo alcuni valori costanti nel foglio di stile, quindi li memorizzeremo in variabili e queste due variabili seguenti definiranno il colore di base della nostra vCard.

 $ base: #fff; $ scuro: scurisci ($ base, 10%); 

Mentre il $ larghezza la variabile sottostante sarà la larghezza della nostra pagina; sarà anche la base per definire altre dimensioni degli elementi.

 $ larghezza: 500px; $ spazio: $ larghezza / 25; // = 20px 

E il $ spazio variabile, come puoi vedere, sarà la spaziatura predefinita o la dimensione della colonna nella nostra vCard che in questo esempio sarebbe 20px;

Compass ha anche Helpers per rilevare le dimensioni dell'immagine e useremo questa funzione sul nostro profilo immagine, come segue;

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

L'extra aggiunta di (($ spazio / 4) * 2) nel codice sopra, è per calcolare la larghezza totale dell'immagine compreso il bordo che inquadrerà l'immagine. Una cornice ha generalmente due lati; in alto e in basso / a sinistra ea destra, è per questo che moltiplichiamo il risultato della divisione di 2.

Ereditarietà del selettore

Apparentemente ci sono alcuni selettori nel nostro foglio di stile che avranno le stesse regole di stile. Per evitare la ripetizione nel nostro codice, dovremo prima specificare questi stili ed ereditarli con il @estendere direttiva ogni volta che è necessario. Questo metodo, in Sass, è noto come Ereditarietà del selettore, una caratteristica molto utile che manca in LESS.

 .float-left float: left;  .box-sizing @include box-sizing (border-box);  

stili

Quando è stato impostato tutto ciò che è necessario, è ora di modellare la nostra vCard, iniziando con un colore di sfondo per il nostro documento HTML;

 html height: 100%; colore di sfondo: $ base;  

vCard

I seguenti stili definiscono il wrapper vCard. Se hai già lavorato con LESS in precedenza, questo codice ti sarà familiare e facile da digerire.

 .vcard width: $ width; margine: 50px auto; background-color: darken ($ base, 5%); border: 1px solid $ dark; @include border-radius (3px); ul padding: 0; margine: 0; li list-style: none;  

La larghezza del wrapper eredita il valore da $ larghezza variabile. Il colore di sfondo è più scuro di 5% dal colore di base, mentre il colore del bordo sarà più scuro 10%. Questa colorazione è ottenuta utilizzando le funzioni di colore Sass.

Avrà anche la vCard 3px raggio degli angoli arrotondati ottenuto utilizzando Compass CSS3 Mixins; border-radius (3px).

Sezione Bio

Come abbiamo notato all'inizio di questo tutorial, la vCard può essere divisa in due sezioni. Questi stili nidificati di seguito definiranno la prima sezione che contiene il profilo dell'immagine con alcuni dettagli (nome, email e telefono).

 .bio border-bottom: 1px solid $ dark; imbottitura: $ spazio; @extend .box-sizing; img @extend .float-left; blocco di visualizzazione; border: ($ space / 4) solid #ffffff;  .detail @extend .float-left; @extend .box-sizing; colore: scurire (base $, 50%); margine: sinistra: $ spazio; fondo: $ spazio / 2;  width: $ width - (($ space * 3) + $ img); li &: before width: $ space; altezza: $ spazio; margine-destra: $ spazio; font-family: "ModernPictogramsNormal";  & .name: before content: "f";  & .email: before content: "m";  & .phone: before content: "N";  

C'è una cosa dal codice qui sopra che pensiamo che sia necessario prendere nota. La larghezza in .dettaglio selettore è specificato con questa equazione $ width - (($ space * 3) + $ img);.

Questa equazione è usata per calcolare dinamicamente i dettagli larghezza sottraendo la larghezza del profilo dell'immagine e gli spazi (riempimento e margine) dalla larghezza totale vCard.

Sezione sociale

Gli stili sottostanti sono per la seconda sezione della vCard. In realtà qui non c'è alcuna differenza con i semplici CSS, solo ora sono nidificati e alcuni valori sono definiti con variabili.

 .social background-color: $ dark; larghezza: 100%; imbottitura: $ spazio; @extend .box-sizing; ul text-align: center; li display: inline-block; larghezza: 32 px; altezza: 32px; a decorazione del testo: nessuna; display: blocco in linea; larghezza: 100%; altezza: 100%; text-indent: 100%; white-space: nowrap; overflow: nascosto;  

In questa sezione, mostreremo le icone dei social media usando la tecnica image sprite e Compass ha una funzione per fare quel lavoro più velocemente.

Prima di tutto, dobbiamo mettere le nostre icone in una cartella speciale - chiamiamo la cartella /sociale/, per esempio. Di nuovo nel foglio di stile, concatena quelle icone con il seguente @importare regola.

 @import "social / *. png"; 

Il sociale/ sopra si riferiscono alla cartella in cui memorizziamo le icone. Questa cartella deve essere nidificata all'interno della cartella immagine. Ora, se diamo un'occhiata alla nostra cartella immagini, dovremmo vedere un'immagine sprite generata con caratteri casuali, come socio-sc805f18607.png. A questo punto, non succede ancora nulla al front-end, finché non applichiamo gli stili con la riga seguente.

 @include all-social-sprite; 

Risultato finale

Finalmente, dopo tutto il duro lavoro ora possiamo vedere il risultato in questo modo:

Nel caso in cui lo pensiamo 500px è troppo largo più tardi, abbiamo solo bisogno di cambiare il valore in $ larghezza variabile - per esempio, 350px - il resto lo farà “magicamente” essere regolato Puoi anche sperimentare con la variabile cromatica.

• Visualizza la demo
• Scarica fonte

Conclusione

In questo tutorial ti abbiamo mostrato come costruire una semplice vCard online con Sass e Compass; questo è solo un esempio, tuttavia. Sass e Compass sono davvero potenti, ma a volte non è necessario. Ad esempio, quando stiamo lavorando su un sito Web con poche pagine e probabilmente serviranno anche meno linee di stili, l'uso di Sass e Compass è considerato eccessivo.

Questo post chiude la nostra serie Sass e speriamo vi sia piaciuto. Se hai qualche domanda in merito a questo argomento non esitare ad aggiungerlo nella casella dei commenti qui sotto.