„Sass“ mokomoji programa „Online vCard“ su „Sass & Compass“ kūrimas

Šiandien mes tęsime savo diskusiją apie Sass ir tai bus paskutinė mūsų Sass serijos dalis. Šį kartą, o ne teoriniu požiūriu, tai bus šiek tiek praktiškesnė. Su „Sass“ kartu su kompasu sukursime internetinę „vCard“.

Idėja yra, kad „vCard“ turėtų būti lengvai reguliuojama, kad būtų galima pasirinkti spalvą ir dydį. Šiame procese naudosime keletą „Sass“ ir „Compass“ funkcijų Kintamieji, mišiniai, operacijos, atrankos paveldėjimas, įterptos taisyklės ir Kompaso pagalbininkai. Jei praleidote ankstesnius šios serijos įrašus, rekomenduojame juos peržiūrėti, prieš tęsdami.

Planavimas ir „Wireframing“

Dirbdami su „Sass“ ir „Compass“, planavimas yra būtinas. Paprastai turime turėti didelį vaizdą apie tai, kaip bus galutinis rezultatas (pvz., Puslapis ar svetainė). Būtų naudinga naršyti kai kurias svetaines, pvz., „Behance“ ar „Dribbble“, skirtas idėjoms. Tada mes galime parengti idėjas ant popieriaus arba sukurti jį vieliniu būdu, kaip ir šis pavyzdys.

Kaip matote iš aukščiau esančio vaizdo, mūsų vCard yra Kontaktinė informacija apie „John“ - vaizdo profilį, šiek tiek informacijos apie Joną, pavyzdžiui, jo vardą, el. pašto adresą, telefono numerį ir trumpą aprašymą apie tai, kas jis yra arba ką jis daro. Tai bus mūsų „bio“ skyrius.

Žemiau yra jo socialiniai identitetai socialinių mygtukų pavidalu. Tai bus mūsų „socialinis“ skyrius.

Turto paruošimas

Prieš pradėdami koduoti, čia yra keletas esminių dalykų, kaip pasiruošti. Renkuosi, kad iki šiol jūsų kompiuteryje turi būti įdiegtas „Sass“ ir „Compass“.

(Jei nesate tikri, ar juos įdiegėte, galite paleisti šią komandą sass -v arba kompasas -v per Komandinė eilutė arba terminalas arba, jei norite dirbti su GUI, visada galite naudoti programą, pvz., „Scout“ programą.)

Mums taip pat reikės kelių turto, pvz., Šrifto piktogramų ir socialinės žiniasklaidos piktogramų, kurias galite gauti iš tokių vietų kaip „ModernPictograms“.

Galiausiai, kadangi mes naudojame komandinę eilutę / terminalą šiai pamokai, turime pereiti prie mūsų katalogo ir paleisti Compass projektą su šiomis dviem komandomis: kompaso inicijavimas ir kompaso laikrodis.

HTML žymėjimas

Žemiau yra mūsų vCard HTML žymėjimas, tai gana paprasta. Visi skyriai yra suvynioti į loginę HTML5 žymą

      Thoriq Firdaus
 [email protected]
 (+62) 1.2345.678.9
 „Lorem ipsum dolor sit amet, consectetur elit“. Suspendisse dolor neque, eleifend ne pellentesque quis, convallis sit amet tellus. Etiam et auctor arcu.
 
 
 
   Facebook
  „Twitter“
 „Google“+
 Dribbble

Kaip matote pirmiau, socialinė tapatybė įtraukta į „socialinį“skyrius yra suskirstytas į sąrašo elementus, kad galėtume juos lengvai parodyti šalia. Kiekvienam iš jų suteikiamas klasės pavadinimas pagal šią konvenciją socialinis-facebook, socialinis-Twitter, socialinis-google ir taip toliau.

Kompaso konfigūracija

Turime šiek tiek konfigūruoti kompasą, atmetant kelias eilutes config.rb byla:

 # Čia galite pasirinkti pageidaujamą išvesties stilių (galima perrašyti per komandinę eilutę): output_style =: expanded # Įgalinti santykinius kelius į turtą kompaso pagalbinių funkcijų pagalba. Nepriimtas: suhteinis_pasirinkimas = tiesa # Norėdami išjungti derinimo komentarus, rodančius pradinę pasirinkėjų vietą. Neįtraukimas: line_comments = false

Jei nerandate config.rb failą, tikriausiai neturėjote šios komandos kompaso inicijavimas jūsų projekto kataloge.

Failų importavimas

Kadangi naudosime kompasą, turime jį importuoti naudodami;

 @import "kompasas";

Ir mano asmeninis pageidavimas yra iš naujo nustatyti numatytuosius stilius iš naršyklių, kad išvestis būtų nuoseklesnė. Šiuo atveju kompasas turi „Reset“ modulį. Šis modulis pagrįstas Eric Meyer CSS atstatymu ir gali būti importuojamas naudojant;

 @import "kompasas / atstatymas";

Vis dėlto aš norėčiau naudoti Normalizuoti, kad laimei taip pat yra Sass / Scss formatu. Atsisiųskite failą čia, išsaugokite jį sass darbo katalogą ir importuokite jį į mūsų stilių lentelę.

 @import "normalizuoti";

Rekomenduojamas skaitymas: CSS stiliaus prioritetų lygio peržiūra

Kintamieji

Mes tikrai turėsime keletą pastovių reikšmių stiliaus lape, todėl mes juos išsaugosime kintamuosiuose ir šie du kintamieji žemiau nustatys pagrindinę mūsų vCard spalvą.

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

Kol $ plotis žemiau pateiktas kintamasis bus mūsų puslapio plotis; tai bus ir kitų elementų dydžių pagrindas.

 $ plotis: 500 px; $ space: $ width / 25; // = 20 kartų

Ir $ erdvė kintamasis, kaip matote, bus numatytasis tarpas arba stulpelio dydis mūsų vCard, kuris šiame pavyzdyje būtų 20px;

Kompasas taip pat turi „Helpers“, kad aptiktų vaizdo dydį, ir mes naudosime šią funkciją mūsų vaizdo profilyje taip:

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

Papildoma Papildymas apie (($ $ / 4) * 2) pirmiau pateiktame kode yra apskaičiuojamas bendras vaizdo plotis, įskaitant sienas, kuri bus rėmo nuotrauką. Rėmas paprastai turi dvi puses; viršuje ir apačioje / kairėje ir dešinėje, todėl mes dauginame pasidalijimo rezultatas iki 2.

Selektoriaus paveldėjimas

Akivaizdu, kad mūsų stiliaus lape yra keletas pasirinkėjų, kurie turės tas pačias stiliaus taisykles. Kad išvengtume pakartojimų mūsų kode, pirmiausia turime nurodyti šiuos stilius ir paveldėti juos @extend prireikus. Šis metodas Sassas yra žinomas kaip Selektoriaus paveldėjimas, labai naudinga funkcija, kurios trūksta LESS.

 .float-left float: kairė; . dėžutės dydžio nustatymas @įtraukti dėžutės dydį (pasienio langelį);

Stiliai

Kai viskas, kas reikalinga, buvo sukonfigūruota, atėjo laikas suformuoti mūsų „vCard“, pradedant nuo fono spalvos į mūsų HTML dokumentą;

 html aukštis: 100%; fono spalva: $ base;

vCard

Toliau pateikiami stiliai apibrėžia vCard voką. Jei anksčiau dirbote su „LESS“, šis kodas bus jums susipažinę ir lengvai suprantamas.

 .vcard plotis: $ plotis; paraštė: 50px auto; fono spalva: tamsėja ($ base, 5%); siena: 1px kietas $ tamsus; @ įtraukti sienos spindulį (3px); ul padding: 0; marža: 0; li list-style: ne;

Pakuotės plotis paveldi vertę iš $ plotis kintamasis. Fono spalva yra tamsesnė 5% nuo pagrindinės spalvos, o sienos spalva bus tamsesnė 10%. Ši spalva pasiekiama naudojant „Sass“ spalvų funkcijas.

Taip pat bus vCard 3px suapvalintų kampų spindulys, pasiekiamas naudojant „Compass CSS3 Mixins“; pasienio spindulys (3px).

Bio skyrius

Kaip jau minėjome šios pamokos metu, vCard galima suskirstyti į dvi dalis. Šie žemiau pateikiami stiliai nustatys pirmąją skiltį, kurioje yra vaizdo profilis su keliais duomenimis (vardas, el. Paštas ir telefonas).

 .bio border-bottom: 1px kietas $ tamsus; įdėjimas: $ space; @extend .box-dydis; img @extend .float-left; ekranas: blokas; siena: ($ space / 4) kietas #ffffff;  .detail @extend .float-left; @extend .box-dydis; spalva: tamsėja ($ base, 50%); paraštė: left: $ space; apačioje: $ space / 2;  plotis: $ width - (($ space * 3) + $ img); li &: prieš plotis: $ erdvė; aukštis: $ erdvė; paraštė-dešinė: $ erdvė; šrifto šeima: "ModernPictogramsNormal";  & .name: prieš content: "f";  & .email: prieš content: "m";  & .phone: prieš turinys: "N";

Yra vienas dalykas iš pirmiau minėto kodo, kad mes manome, kad reikia apie tai pranešti. Plotis .išsamiai selektorius nurodytas su šia lygtimi $ width - (($ space * 3) + $ img);.

Ši lygtis naudojama dinamiškai apskaičiuoti detales plotis atimdami vaizdo profilio plotį ir tarpus (pagalvėlę ir paraštę) iš bendro vCard pločio.

Socialinis skyrius

Žemiau pateikti stiliai skirti antrajai vCard daliai. Iš tiesų čia nėra jokio skirtumo tarp paprasto CSS, tik dabar jos yra įdėtos, o kelios vertės yra apibrėžtos su kintamaisiais.

 .socialinis fono spalva: $ tamsus; plotis: 100%; įdėjimas: $ space; @extend .box-dydis; ul text-align: centre; li ekranas: inline-blokas; plotis: 32px; aukštis: 32px; teksto apdaila: nėra; ekranas: inline-block; plotis: 100%; aukštis: 100%; teksto įtrauka: 100%; baltoji erdvė: krapštukas; perteklius paslėptas;

Šiame skyriuje bus rodomos socialinės žiniasklaidos piktogramos, naudojant vaizdo sprite techniką, o kompasas turi funkciją, kuri leidžia greičiau atlikti darbą.

Pirmiausia, mes turime įdėti savo piktogramas į specialų aplanką - pavadinkime aplanką / socialinis /, pavyzdžiui. Grįžkite į stilių lentelę ir sujunkite šias piktogramas @import taisyklė.

 @import "social / *. png";

The socialinis / aukščiau nurodykite aplanką, kuriame laikome piktogramas. Šis aplankas turi būti įtrauktas į vaizdo aplanką. Dabar, jei pažvelgsime į mūsų vaizdų aplanką, turėtume matyti „Sprite“ vaizdą, sukurtą su atsitiktiniais simboliais social-sc805f18607.png. Šiuo metu priekyje nėra nieko, kol taikysime stilius su šia eilute.

 @ įtraukti visus socialinius spritus;

Galutinis rezultatas

Galiausiai, po visų sunkių darbų dabar galime matyti tokį rezultatą:

Jei manome, kad tai yra 500px vėliau yra per plati, mums reikia tik pakeisti vertę $ plotis kintamasis - pvz, 350 pikselių - poilsio bus “stebuklingai” koreguoti. Taip pat galite eksperimentuoti su spalvos kintamuoju.

Peržiūrėti demonstraciją
Atsisiųsti šaltinį

Išvada

Šioje instrukcijoje parodėme, kaip sukurti paprastą internetinę „vCard“ su „Sass“ ir „Compass“; tačiau tai tik pavyzdys. Sasas ir kompasas iš tiesų yra galingi, bet kartais tai nėra būtina. Pavyzdžiui, kai dirbame svetainėje, kurioje yra keli puslapiai ir kuriam tikriausiai reikės tik mažiau stilių, naudojant „Sass“ ir „Compass“ laikomi pernelyg dideliais.

Šis pranešimas uždaro mūsų „Sass“ seriją ir tikimės, kad jums patiks. Jei turite kokių nors klausimų, susijusių su šia tema, nedvejodami pridėkite jį žemiau esančiame komentarų laukelyje.