Sass apmācība Online vCard izveide ar Sass & Compass

Šodien mēs turpināsim diskusiju par Sass, un tā būs mūsu Sass sērijas pēdējā daļa. Šoreiz, nevis teorētiska pieeja, tas būs nedaudz praktiskāks. Mēs izveidosim tiešsaistes vCard, izmantojot Sass kopā ar kompasu.

Ideja ir tāda, ka vCard ir viegli regulējams, lai nodrošinātu krāsu un izmēru. Šajā procesā mēs izmantosim dažas Sass un Compass funkcijas, piemēram, Mainīgie lielumi, maisījumi, operācijas, selektoru mantojums, ligzdoti noteikumi un Kompasa palīgi. Ja esat izlaidis iepriekšējās šīs sērijas ziņas, iesakām vispirms apskatīt tās, pirms turpināt.

Plānošana un drukāšana

Strādājot ar Sass un Compass, plānošana ir būtiska. Mums parasti ir nepieciešams liels attēls par to, kā būs galīgais rezultāts (piemēram, lapa vai tīmekļa vietne). Būs lietderīgi pārlūkot dažas vietnes, piemēram, Behance vai Dribbble idejām. Pēc tam mēs varam sagatavot idejas uz papīra vai veidot to ar stiepļu karkasu, tāpat kā šis piemērs.

Kā redzams no iepriekš redzamā attēla, mūsu vCard satur Kontaktinformācija par „John” - attēla profilu, kādu informāciju par Džonu, piemēram, viņa vārdu, e-pasta adresi, tālruņa numuru un īsu aprakstu par to, kas viņš ir vai ko viņš dara. Tā būs mūsu “bio” sadaļa.

Zemāk ir viņa sociālā identitāte sociālo pogu veidā. Tā būs mūsu sociālā sadaļa.

Aktīvu sagatavošana

Pirms sākam kodēt, šeit ir daži būtiski elementi, lai sagatavotos. Es saprotu, ka līdz šim jums ir jāinstalē Sass un kompass.

(Ja neesat pārliecināts, vai esat to instalējis, varat palaist šo komandu sass -v vai kompass-v caur Komandu uzvedne vai Terminal vai, jūs vienmēr varat izmantot programmu, piemēram, Scout App, ja vēlaties strādāt ar GUI.)

Mums būs vajadzīgi arī daži līdzekļi, piemēram, fontu ikonas un sociālās multivides ikonas, kuras var iegūt no tādām vietām kā ModernPictograms.

Visbeidzot, tā kā šai apmācībai izmantojam komandu uzvedni / termināli, mums ir jāpārvietojas uz mūsu direktoriju un jāizmanto Compass projekts ar šīm divām komandām: kompasa init un kompasa skatīties.

HTML iezīmēšana

Zemāk ir mūsu vCard HTML marķējums, tas ir diezgan vienkārši. Visas sadaļas tiek ietvertas loģiskā HTML5 tagā

      Thoriq Firdaus
 [email protected]
 (+62) 1.2345.678.9
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse dolor neque, eleifend pie pellentesque quis, convallis sit amet tellus. Etiam et auctor arcu.
 
 
 
   Facebook
  Čivināt
 Google+
 Dribbble

Kā redzams iepriekš, sociālā identitāte iekļauta “sociālajā”sadaļa ir strukturēta saraksta elementos, lai mēs varētu tos viegli parādīt blakus. Katrai no tām ir piešķirts klases nosaukums pēc šīs konvencijas sociālais-facebook, sociālais-čivināt, sociālais-google un tā tālāk.

Kompasa konfigurācija

Mums ir nepieciešams konfigurēt kompasu mazliet, atceļot dažas rindas config.rb failu:

 # Jūs varat izvēlēties vēlamo izejas stilu šeit (to var atcelt, izmantojot komandrindu): output_style =: expanded # Lai iespējotu relatīvos ceļus aktīviem, izmantojot kompasa palīgu funkcijas. Atcelt: suhteis_izdevumi = true # Lai atspējotu atkļūdošanas komentārus, kas attēlo atlasītāju sākotnējo atrašanās vietu. Uncomment: line_comments = false

Ja nevarat atrast config.rb failu, jūs, iespējams, neesat palaist šo komandu kompasa init jūsu projekta direktorijā.

Failu importēšana

Tā kā mēs izmantosim kompasu, mums tā jāieved, izmantojot;

 @import "kompass";

Un tā ir mana personīgā vēlme atjaunot noklusējuma stilus no pārlūkprogrammām tā, lai produkcija kļūtu konsekventāka. Šajā gadījumā kompasam ir Reset modulis. Šis modulis ir balstīts uz Eric Meyer CSS atiestatīšanu un to var importēt, izmantojot;

 @import "kompass / atiestatīšana";

Tomēr es labprātāk izmantoju Normalizāciju arī nāk Sass / Scss formātā. Lejupielādējiet failu šeit, saglabājiet to sass darba direktoriju un importējiet to mūsu stillapā.

 @import "normalizēt";

Ieteicamais lasījums: CSS stila prioritātes līmeņa pārskatīšana

Mainīgie

Mums noteikti būs dažas nemainīgas vērtības stillapā, tāpēc mēs tos saglabāsim mainīgajos lielumos, un šie divi mainīgie lielumi noteiks mūsu vCard pamatkrāsu.

 $ base: #fff; $ dark: tumšāka ($ base, 10%);

Kamēr $ platums tālāk redzamais mainīgais ir mūsu lapas platums; tas būs arī pamats citu elementu izmēru noteikšanai.

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

Un $ telpa mainīgais, kā jūs varat redzēt, būs mūsu vCard noklusējuma atstatums vai kolonnas lielums, kas šajā piemērā būtu 20px;

Kompasam ir arī Palīgierīces, lai noteiktu attēla izmēru, un mēs izmantosim šo funkciju mūsu attēla profilā šādi;

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

Papildus Papildinājums no (($ $ / 4) * 2) iepriekšminētajā kodā ir aprēķināt kopējo attēla platumu, ieskaitot robežu, kas attēlos attēlu. Rāmim parasti ir divas puses; augšā un apakšā / pa kreisi un pa labi, tāpēc mēs vairojam sadalījuma rezultāts līdz 2.

Selektora mantojums

Šķiet, ka mūsu stillapā ir daži atlasītāji, kuriem būs tādi paši stila noteikumi. Lai izvairītos no atkārtošanās mūsu kodā, mums vispirms būs jāprecizē šie stili un mantot tos ar @extend direktīvu, kad vien tas nepieciešams. Šī metode Sassā ir pazīstama kā Selektora mantojums, ļoti noderīga funkcija, kas trūkst LESS.

 .float-left float: pa kreisi;  .boksu izmēri @ ietver kastes izmēru (robežkaste);

Stili

Kad viss, kas nepieciešams, ir uzstādīts, tad ir pienācis laiks veidot mūsu vCard, sākot ar fona krāsu uz mūsu HTML dokumentu;

 html augstums: 100%; fona krāsa: $ base;

vCard

Šādi stili nosaka vCard iesaiņojumu. Ja esat strādājis ar LESS iepriekš, šis kods jums būs pazīstams un viegli sagremojams.

 .vcard platums: $ platums; starpība: 50px auto; fona krāsa: tumšāka ($ bāzes, 5%); robeža: 1px ciets $ tumšs; @ ietver robežu rādiusu (3px); ul polsterējums: 0; starpība: 0; li list-style: nav;

Iesaiņotāja platums pārņem vērtību no $ platums mainīgais. Fona krāsa ir tumšāka 5% no bāzes krāsas, bet robežas krāsa būs tumšāka 10%. Šī krāsa tiek panākta, izmantojot Sass krāsu funkcijas.

VCard būs arī 3px noapaļotu stūru rādiuss, kas tiek sasniegts, izmantojot Compass CSS3 Mixins; robežu rādiuss (3px).

Bio nodaļa

Kā mēs pamanījām šīs apmācības sākumā, vCard var iedalīt divās daļās. Šie zemāk minētie stili noteiks pirmo sadaļu, kurā ir attēla profils ar dažām detaļām (vārds, e-pasts un tālrunis).

 .bio border-bottom: 1px ciets $ tumšs; polsterējums: $ space; @extend .box-izmēri; img @extend .float-left; displejs: bloks; robeža: ($ space / 4) ciets #ffffff;  .detail @extend .float-left; @extend .box-izmēri; krāsa: tumšāka ($ bāzes, 50%); starpība: left: $ space; apakšā: $ space / 2;  platums: $ width - (($ space * 3) + $ img); li &: pirms platums: $ telpa; augstums: $ telpa; margin-right: $ space; font-family: "ModernPictogramsNormal";  & .name: pirms saturs: "f";  & .email: pirms content: "m";  & .phone: pirms saturs: "N";

No iepriekš minētā koda ir viena lieta, kas, mūsuprāt, ir jāpaziņo. Platums .detalizēti selektors ir norādīts ar šo vienādojumu $ width - (($ space * 3) + $ img);.

Šo vienādojumu izmanto, lai dinamiski aprēķinātu detaļas platums atņemot attēla profila platumu un atstarpes (polsterējumu un margu) no vCard kopējā platuma.

Sociālā nodaļa

Turpmāk minētie stili attiecas uz otro vCard sadaļu. Šeit faktiski nav atšķirības ar vienkāršu CSS, tikai tagad tās ir ligzdotas, un dažas vērtības ir definētas ar mainīgajiem.

 .sociālā fona krāsa: $ tumsā; platums: 100%; polsterējums: $ space; @extend .box-izmēri; ul text-align: centre; li displejs: inline-bloks; platums: 32px; augstums: 32px; a text-decoration: nav; displejs: inline-bloks; platums: 100%; augstums: 100%; teksta ievilkums: 100%; balta telpa; pārplūde: slēpta;

Šajā sadaļā mēs parādīsim sociālo mediju ikonas, izmantojot attēla sprite tehniku, un kompasam ir iespēja to darīt ātrāk.

Pirmkārt, mums ir jāievieto savas ikonas īpašā mapē - nosauksim mapi / sociāli /, piemēram. Atveriet stilu, savienojiet šīs ikonas ar sekojošo @import noteikums.

 @import "social / *. png";

The sociāli / iepriekš, sk. mapi, kurā glabājam ikonas. Šī mape jāiekļauj attēla mapē. Tagad, ja mēs skatāmies mūsu attēlu mapē, mums vajadzētu redzēt sprite attēlu, kas radīts ar izlases rakstzīmēm, piemēram, social-sc805f18607.png. Šajā brīdī priekšējā galā nekas vēl nenotiek, kamēr mēs neizmantojam stilus ar šādu rindu.

 @ ietver visus sociālos spritus;

Galīgais rezultāts

Visbeidzot, pēc smagā darba tagad mēs varam redzēt šādu rezultātu:

Ja mēs to domājam 500px vēlāk ir pārāk plašs, mums tikai jāmaina vērtība $ platums mainīgais - piemēram, 350px - pārējā būs “maģiski” jāpielāgo. Varat arī eksperimentēt ar krāsu mainīgo.

Skatīt demonstrāciju
Lejupielādēt avotu

Secinājums

Šajā apmācībā mēs parādījām, kā izveidot vienkāršu tiešsaistes vCard ar Sass un Compass; tas ir tikai piemērs. Sass un kompass ir patiešām spēcīgi, bet dažreiz tas nav nepieciešams. Piemēram, kad mēs strādājam pie tīmekļa vietnes ar dažām lapām un, iespējams, būs nepieciešami tikai mazāk stilu rindu, izmantojot Sass un Compass, tiek uzskatīts par pārmērīgu.

Šis ziņojums aizver mūsu Sass sēriju un mēs ceram, ka jums tas patika. Ja jums ir kādi jautājumi par šo tematu, nevilcinieties to pievienot komentāru ailē.