Sass Tutorial Vytváranie online vCard so Sass & Compass

 
 
  
 
 
Thoriq Firdaus
 
[email protected]
 
(+62) 1.2345.678.9
 
Lorem ipsum dolor sedí amet, consectetur adipiscing elit. Suspendisse dolor neque, elefend v pellentesque quis, convallis sit amet tellus. Etiam et auctor arcu.
 
 
 
 
 
 
Facebook
 
 cvrlikání
 
Google+
 
Dribbble
 
 
 
 

Ako vidíte vyššie, sociálna identita zahrnutá v "sociálnych"sekcia je štruktúrovaná v prvkoch zoznamu, takže ich môžeme ľahko zobraziť vedľa seba. Každý z nich má podľa tejto konvencie názov triedy sociálno-facebook, sociálno-twitter, sociálno-google a tak ďalej.

Konfigurácia kompasu

Potrebujeme nakonfigurovať kompas tak, že odkomentujeme niekoľko riadkov config.rb spis:

 # Môžete si vybrať preferovaný štýl výstupu (môžete ho overiť cez príkazový riadok): output_style =: expanded # Aktivovať relatívne cesty k aktívam pomocou pomocných funkcií kompasu. Odmietnuť: relative_assets = true # Ak chcete zakázať komentáre ladenia, ktoré zobrazujú pôvodné umiestnenie vašich selektorov. Odkomentovať: line_comments = false 

Ak nemôžete nájsť config.rb súbor pravdepodobne ste nespustili tento príkaz kompas init v adresári projektu.

Importovanie súborov

Keďže budeme používať Compass, musíme ho importovať pomocou;

 @import "kompas"; 

A je mojou osobnou preferenciou obnoviť predvolené štýly z prehliadačov tak, aby sa výstup zobrazoval dôslednejšie. Kompas má v tomto prípade modul Reset. Tento modul je založený na obnovení CSS Ericom Meyerom a je možné ho importovať pomocou;

 @import "kompas / reset"; 

Ale radšej používam Normalize, že našťastie tiež prichádza vo formáte Sass / Scss. Súbor stiahnite tu a uložte ho Sass pracovný adresár a importujte ho do nášho štýlu.

 @import "normalizovať"; 

Odporúčané čítanie: Kontrola prioritnej úrovne štýlu CSS

premenné

V štýle šablón určite budeme mať niekoľko konštantných hodnôt, preto ich uložíme do premenných a tieto dve premenné nižšie definujú základnú farbu našej vCard.

 $ base: #fff; $ tmavá: tmavá ($ base, 10%); 

Kým šírka $ nasledujúca premenná bude šírka našej stránky; bude tiež základom pre definovanie iných veľkostí prvkov.

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

A $ space ako vidíte, bude predvolená medzera alebo veľkosť stĺpca v našej vCard, ktorá by bola v tomto príklade 20px;

Spoločnosť Compass má aj pomocníkov na zisťovanie veľkosti záberu a túto funkciu využijeme v našom profile obrázkov takto:

 $ img: šírka obrazu ("me.jpg") + (($ space / 4) * 2); 

Extra pridanie z (($ miesto / 4) * 2) v uvedenom kóde je vypočítať celkovú šírku obrazu vrátane okraja, ktorý bude rámovať obrázok. Rám má všeobecne dve strany; hore a dole / doľava a doprava, preto množíme výsledok delenia podľa 2.

Selektorová dedičnosť

V našom šablóne štýlov je zrejme niekoľko výberových prvkov, ktoré budú mať rovnaké pravidlá štýlov. Aby sme sa vyhli opakovaniu v našom kóde, budeme musieť najprv špecifikovať tieto štýly a zdediť ich @extend kedykoľvek je to potrebné. Táto metóda, v Sass, je známa ako Selektorová dedičnosť, veľmi užitočnú funkciu, ktorá chýba v LESS.

 .float-left float: left;  .box-size @ include box size-box);  

štýly

Keď bolo nastavené všetko, čo je potrebné, je načase nasadiť našu vCard, začínajúc farbou pozadia v našom HTML dokumente;

 html výška: 100%; farba pozadia: $ base;  

vCard

Nasledujúce štýly definujú balík vCard. Ak ste už pracovali v službe LESS, tento kód vám bude dobre známy a ľahko stráviteľný.

 .vcard šírka: $ šírka; okraj: 50 pixlov auto; farba pozadia: tmavšia ($ base, 5%); hranica: 1px solid $ dark; @ zahŕňa okraj okraja (3px); ul padding: 0; rozpätie: 0; li štýl zoznamu: žiadny;  

Šírka obálky zdedí hodnotu z šírka $ variabilné. Farba pozadia je tmavšia 5% od základnej farby, zatiaľ čo farba okraja bude tmavšia 10%. Toto zafarbenie sa dosiahne pomocou funkcií farieb Sass.

VCard bude mať tiež 3PX polomer zaoblených rohov, ktorý sa dosahuje použitím zmesi Compass CSS3 Mixins; border-radius (3PX).

Bio sekcia

Ako sme si všimli už v tejto príručke, vCard možno rozdeliť na dve časti. Tieto vnorené štýly definujú prvú sekciu, ktorá obsahuje profil obrázka, s niekoľkými podrobnosťami (meno, e-mail a telefón).

 .bio border-bottom: 1px solid $ dark; polstrovanie: $ space; @extend.box-size; img @extend.float-left; zobrazenie: blok; hranica: ($ space / 4) solid #ffffff;  .detail @extend .float-left; @extend.box-size; farba: tmavšia ($ základňa, 50%); okraj: left: $ space; spodné: $ space / 2;  šírka: $ šírka - (($ space * 3) + $ img); li &: pred width: $ space; výška: $ space; margin-right: $ space; font-family: "ModernPictogramsNormal";  & .name: pred obsah: "f";  & .mail: pred obsah: "m";  & .phone: pred obsah: "N";  

Z vyššie uvedeného kódu je jedna vec, o ktorej si myslíme, že je potrebné vziať na vedomie. Šírka v .detail selektor je špecifikovaný touto rovnicou $ šírka - (($ space * 3) + $ img);.

Táto rovnica sa používa na dynamické výpočty detailov šírka odčítaním šírky obrazu a medzery (výplň a okraj) z celkovej šírky vCard.

Sociálna sekcia

Štýly uvedené nižšie sa týkajú druhej časti vCard. V skutočnosti nie je žiadny rozdiel s obyčajným CSS tu, len teraz sú vnorené a niekoľko hodnôt je definovaných premennými.

 .sociálna farba pozadia: $ tmavá; šírka: 100%; polstrovanie: $ space; @extend.box-size; ul text-align: center; li zobrazenie: inline-block; šírka: 32px; výška: 32px; a text-decoration: none; zobrazenie: inline-block; šírka: 100%; výška: 100%; textová zarážka: 100%; white-space: teraz; pretečenie: skryté;  

V tejto časti sa zobrazia ikony sociálnych médií pomocou technológie image sprite a Compass má funkciu, ktorá umožňuje rýchlejšiu prácu.

Najprv musíme vložiť naše ikony do špeciálneho priečinka - pomenujte si priečinok /sociálnej/, napríklad. Vráťte sa späť do šablóny so štýlmi a spojte tieto ikony s nasledujúcimi @import pravidlo.

 @import "social / * .png"; 

sociálnej/ vyššie nájdete v priečinku, kde ukladáme ikony. Tento priečinok by mal byť vnorený do priečinka s obrázkami. Teraz, ak sa pozrieme na našu zložku obrázkov, mali by sme vidieť obrázok sprite generovaný s náhodnými znakmi, ako napríklad sociálno-sc805f18607.png. V tomto okamihu sa na prednom konci nič nestane, kým nepoužijeme štýly s nasledujúcim riadkom.

 @ zahŕňať všetky sociálne-sprites; 

Konečný výsledok

Napokon, po všetkej tvrdej práci môžeme vidieť výsledok takto:

V prípade, že si to myslíme 500px je príliš široká neskôr, potrebujeme zmeniť hodnotu len v šírka $ premennú - napríklad, 350px - zvyšok bude “magicky” byť upravené. Môžete tiež experimentovať s premennou farieb.

• Zobraziť demo
• Stiahnuť zdroj

záver

V tomto návode sme vám ukázali, ako vytvoriť jednoduchý online vCard so Sass a Compassom; to je len príklad. Sass a Compass sú naozaj mocné, ale niekedy to nie je potrebné. Napríklad, keď pracujeme na webových stránkach s niekoľkými stránkami a pravdepodobne bude potrebovať len menej riadkov štýlov, použitie Sass a Compass sa považuje za nadmerné.

Tento príspevok uzatvára sériu Sass a dúfame, že sa vám to páči. Ak máte akékoľvek otázky týkajúce sa tejto témy, neváhajte a pridajte ju do poľa s poznámkami nižšie.