Sass Tutorial Gradimo spletno vizitko s Sass & Compass

 
 
  
 
 
Thoriq Firdaus
 
[email protected]
 
(+62) 1.2345.678.9
 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Spuščanje dolarja neque, eleifend na pellentesque quis, convallis sit amet tellus. Etiam et auctor arcu.
 
 
 
 
 
 
Facebook
 
 Twitter
 
Google+
 
Dribla
 
 
 
 

Kot lahko vidite zgoraj, socialne identitete, vključene v "socialno"Razdelek je strukturiran znotraj elementov seznama, tako da jih lahko enostavno prikažemo vzporedno. Vsakemu od njih je dodeljeno ime razreda, ki sledi tej konvenciji social-facebook, social-twitter, social-google in tako naprej.

Konfiguracija kompasa

Kompas moramo nekoliko konfigurirati tako, da razčlenimo nekaj vrstic v config.rb datoteka:

 # Tu lahko izberete želeni slog izpisa (lahko ga prekličete z ukazno vrstico): output_style =: expanded # Za omogočanje relativnih poti do sredstev prek funkcij pomoči za kompas. Razveljavi komentar: relative_assets = true # Če želite onemogočiti komentarje razhroščevanja, ki prikazujejo prvotno lokacijo vaših selektorjev. Odstrani komentar: line_comments = false 

Če ne najdete config.rb datoteko, verjetno še niste zagnali tega ukaza kompas init v imeniku projekta.

Uvoz datotek

Ker bomo uporabljali kompas, ga moramo uvoziti z uporabo;

 @import "kompas"; 

Moje osebne želje so ponastaviti privzete sloge iz brskalnikov, tako da bo izhod bolj dosleden. Kompas ima v tem primeru modul Reset. Ta modul temelji na ponastavitvi CSS-ja Erica Meyerja in se lahko uvozi z uporabo;

 @import "kompas / ponastavitev"; 

Vendar pa raje uporabljam Normalize, ki je na srečo tudi v formatu Sass / Scss. Prenesite datoteko tukaj in jo shranite sass delovni imenik in ga uvozite v naš slog.

 @import "normalizirati"; 

Priporočeno branje: Pregled prednostne ravni sloga CSS

Spremenljivke

Vsekakor bomo imeli v stilu nekaj konstantnih vrednosti, zato jih bomo shranili v spremenljivke, ti dve spremenljivki pa bosta določili osnovno barvo naše vCard..

 $ base: #fff; $ dark: potemni ($ base, 10%); 

Medtem ko je $ width Spodnja spremenljivka bo širina naše strani; prav tako bo osnova za opredelitev drugih velikosti elementov.

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

In $ space spremenljivka, kot lahko vidite, je privzeti razmik ali velikost stolpca v vCard, ki je v tem primeru 20px;

Kompas ima tudi pomočnike za zaznavanje velikosti slike in to funkcijo bomo uporabili na našem slikovnem profilu, kot sledi;

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

Dodatno Dodatek od (($ space / 4) * 2) V zgornji kodi je izračun skupne širine slike, vključno z obrobo, ki bo uokvirila sliko. Okvir ima na splošno dve strani; zgoraj in spodaj / levo in desno, zato pomnožimo rezultat delitve jo 2.

Selector dedovanje

Obstaja nekaj selektorjev v našem slogovnem listu, ki bodo imeli enaka pravila za oblikovanje. Da bi se izognili ponavljanju v naši kodi, bomo morali najprej določiti te sloge in jih podedovati z @extend po potrebi. Ta metoda, v Sass, je znan kot Selector dedovanje, zelo uporabna funkcija, ki manjka v LESS.

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

Slogi

Ko je vse, kar je potrebno, nastavljeno, je čas, da oblikujete našo vizitko, začenši z barvo ozadja našega HTML dokumenta;

 html višina: 100%; barva ozadja: $ base;  

vCard

Naslednji slogi definirajo ovojnico vCard. Če ste prej delali z LESS-om, vam bo ta koda znana in enostavna za prebavo.

 .vcard width: $ width; margin: 50px auto; barva ozadja: potemni ($ base, 5%); obroba: 1px solid $ dark; @ vključi obmejni polmer (3px); ul polnilo: 0; margin: 0; li list-style: nič;  

Širina ovojnice podeduje vrednost iz $ width spremenljivko. Barva ozadja je temnejša 5% iz osnovne barve, medtem ko bo barva obrobe temnejša 10%. Ta barva se doseže s funkcijami barv Sass.

VCard bo tudi 3px polmer zaobljenih vogalov, ki se doseže z uporabo Compass CSS3 Mixins; obrobni polmer (3px).

Bio sekcija

Kot smo že omenili v tej vadnici, je vCard mogoče razdeliti na dva dela. Ti spodaj našteti slogi bodo določili prvi del, ki vsebuje profil slike z nekaj podrobnostmi (ime, e-pošta in telefon).

 .bio obrobno-dno: 1px solidno temno; padding: $ space; @extend .box-sizing; img @extend .float-left; prikaz: blok; border: ($ space / 4) solid #ffffff;  .detail @extend .float-left; @extend .box-sizing; barva: potemni ($ base, 50%); margin: left: $ space; bottom: $ space / 2;  širina: $ width - (($ space * 3) + $ img); li &: pred width: $ space; višina: $ space; margin-right: $ space; družina pisav: "ModernPictogramsNormal";  & .name: pred content: "f";  & .email: pred vsebina: "m";  & .phone: pred vsebina: "N";  

Iz zgornjega kodeksa je ena stvar, za katero menimo, da morate sprejeti obvestilo. Širina v .podrobnosti s to enačbo določite izbirnik $ width - (($ space * 3) + $ img);.

Ta enačba se uporablja za dinamično izračunavanje podrobnosti premer z odštevanjem širine profila slike in presledkov (padding in margin) od skupne širine vCard.

Socialni oddelek

Spodnji slogi so za drugi del vCard. Z navadnim CSS dejansko ni razlike, šele zdaj so ugnezdene in nekaj spremenljivk je definiranih nekaj vrednosti.

 .social barva ozadja: $ dark; širina: 100%; padding: $ space; @extend .box-sizing; ul text-align: center; li prikaz: inline-block; širina: 32px; višina: 32px; a text-decoration: none; prikaz: inline-block; širina: 100%; višina: 100%; text-indent: 100%; beli prostor: nowrap; overflow: hidden;  

V tem razdelku bomo prikazali ikone družabnih medijev s tehniko slikovnih sprajtov, Compass pa ima funkcijo, ki to delo opravi hitreje.

Najprej moramo ikone postaviti v posebno mapo - imejmo mapo / social /, na primer. Nazaj v slogovno tabelo povežite te ikone z naslednjim @import pravilo.

 @import "social / *. png"; 

The socialno / zgoraj se nanašajo na mapo, kjer shranjujemo ikone. Ta mapa mora biti ugnezdena v mapo s slikami. Zdaj, če pogledamo v našo slikovno mapo, bi morali videti sliko sprite, ki se ustvari z naključnimi znaki, na primer social-sc805f18607.png. Na tej točki se še vedno ne dogaja nič na frontalni strani, dokler ne uporabimo slogov z naslednjo vrstico.

 @ vključi vse socialne sprite; 

Končni rezultat

Končno, po vsem težkem delu lahko zdaj vidimo rezultat, kot je ta:

V primeru, da mislimo tako 500px je kasneje preširok, moramo le spremeniti vrednost v $ width spremenljivka - na primer, 350px - ostalo bo “magično” prilagoditi. Poskusite lahko tudi z barvno spremenljivko.

• Prikaži predstavitev
• Prenesi vir

Zaključek

V tej vadnici smo vam pokazali, kako zgraditi preprost spletni vCard s Sass in Compass; to je le primer. Sass in Compass sta res močna, včasih pa ni potrebna. Na primer, ko delamo na spletnem mestu z nekaj strani in verjetno potrebujete le manj vrstic slogov, se uporaba Sass in Compass šteje za pretirano.

Ta post zapira našo serijo Sass in upamo, da ste jo uživali. Če imate kakršnakoli vprašanja v zvezi s to temo, ga dodajte v polje za komentar spodaj.