Sass Tutorial Opbygning af et online vCard med Sass & Compass

 
 
  
 
 
Thoriq Firdaus
 
[email protected]
 
(+62) 1.2345.678.9
 
Det er et godt sted at være med, og det er vigtigt for dig. Suspendisse dolor neque, eleifend pellentesque quis, convallis sit amet tellus. Etiam et auctor arcu.
 
 
 
 
 
 
Facebook
 
 Twitter
 
Google+
 
Dribbble
 
 
 
 

Som du kan se ovenfor, omfatter de sociale identiteter i "sociale"sektionen er struktureret inden for listelementer, så vi let kan vise dem side om side. Hver af dem får et klassenavn efter denne konvention social-facebook, social-twitter, social-google og så videre.

Kompas konfiguration

Vi er nødt til at konfigurere Compass lidt ved at uncommenting et par linjer i config.rb fil som følger:

 # Du kan vælge din foretrukne udgangsstil her (kan overstyres via kommandolinjen): output_style =: expanded # For at aktivere relative stier til aktiver via kompashelperfunktioner. Uncomment: relative_assets = true # For at deaktivere fejlfindingskommentarer, der viser den oprindelige placering af dine selektorer. Ukomment: line_comments = false 

Hvis du ikke kan finde config.rb fil, har du sandsynligvis ikke kørt denne kommando kompass init i din projektmappe.

Importerer filer

Da vi skal bruge kompas, skal vi importere det ved hjælp af;

 @import "kompas"; 

Og det er min personlige præference at nulstille standardstile fra browserne, så outputen bliver gjort mere konsekvent. Kompas, i dette tilfælde har et Reset-modul. Dette modul er baseret på Eric Meyers CSS reset og kan importeres ved hjælp af;

 @import "kompas / reset"; 

Jeg foretrækker dog at bruge Normalisere det heldigvis kommer også i Sass / Scss format. Download filen her, gem den i sass arbejdsmappe og importere det til vores stylesheet.

 @import "normalisere"; 

Anbefalet læsning: Gennemgang af CSS Style Priority Level

Variable

Vi vil helt sikkert have et par konstante værdier i stilarket, så vi gemmer dem i variabler, og disse to variabler nedenfor definerer basisfarven på vores vCard.

 $ base: #fff; $ mørk: mørkere ($ base, 10%); 

Mens $ bredde Variabel nedenfor vil være vores side bredde; Det vil også være grundlaget for at definere andre elementstørrelser.

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

Og $ plads variabel, som du kan se, vil være standardafstanden eller kolonnestørrelsen i vores vCard, som i dette eksempel ville være 20px;

Compass har også hjælpere til at registrere billedstørrelsen, og vi vil gøre brug af denne funktion på vores billedprofil som følger:

 $ img: billedbredde ("me.jpg") + (($ plads / 4) * 2); 

Den ekstra Addition af (($ plads / 4) * 2) I koden ovenfor skal du beregne den samlede billedbredde, herunder grænsen der rammer billedet. En ramme har generelt to sider; øverste og nederste / venstre og højre, derfor multiplicerer vi division resultat ved 2.

Selector Arv

Der er tilsyneladende et par selektorer i vores stylesheet, der vil have samme styling regler. For at undgå gentagelse i vores kode skal vi først og fremmest angive disse stilarter og arve dem med @forlænge når det er nødvendigt. Denne metode, i Sass, er kendt som Selector Arv, en meget nyttig funktion, der mangler i mindre.

 .float-left float: left;  .box-dimensionering @include box-dimensionering (grænsekasse);  

styles

Når alt, hvad der er nødvendigt, er blevet installeret, er det tid til at style vores vCard, begyndende med en baggrundsfarve til vores HTML-dokument;

 html højde: 100%; baggrundsfarve: $ base;  

vCard

Følgende stilarter definerer vCard wrapper. Hvis du har arbejdet med LESS tidligere, vil denne kode være kendt for dig og let at fordøje.

 .vcard bredde: $ width; margin: 50px auto; baggrundsfarve: mørkere ($ base, 5%); grænse: 1px solid $ dark; @include border-radius (3px); ul polstring: 0; margen: 0; li listestil: none;  

Indpakningens bredde arver værdien fra $ bredde variabel. Baggrundsfarven er mørkere af 5% fra basisfarven, mens grænsekvaliteten bliver mørkere af 10%. Denne farve opnås ved hjælp af Sass farvefunktioner.

VCard vil også have 3px radius af afrundede hjørner, der opnås ved anvendelse af Compass CSS3 Mixins; border-radius (3px).

Bio Section

Som vi har bemærket tidligt i denne tutorial, kan vCard opdeles i to sektioner. Disse nestede stilarter nedenfor definerer det første afsnit, der indeholder billedprofilen med et par detaljer (navn, email og telefon).

 .bio border-bottom: 1px solid $ dark; polstring: $ space; @extend .box-dimensionering; img @extend .float-left; display: blok; grænse: ($ space / 4) solid #ffffff;  .detail @extend .float-left; @extend .box-dimensionering; farve: mørkere ($ base, 50%); margin: left: $ space; bund: $ space / 2;  bredde: $ bredde - (($ plads * 3) + $ img); li &: før bredde: $ space; højde: $ space; margen-højre: $ space; font-family: "ModernPictogramsNormal";  & .name: før indhold: "f";  & .email: før indhold: "m";  & .phone: før indhold: "N";  

Der er en ting fra koden ovenfor, som vi mener, du skal tage en meddelelse om. Bredden i .detalje vælger er angivet med denne ligning $ bredde - (($ plads * 3) + $ img);.

Denne ligning bruges til dynamisk beregning af detaljerne bredde ved at trække billedprofilbredden og mellemrum (polstring og margen) fra vCard totalbredden.

Social Afdeling

Stilen nedenfor er til den anden sektion i vCard. Der er faktisk ingen forskel med almindelig CSS her, kun nu er de nestede, og nogle få værdier er defineret med variabler.

 .social baggrundsfarve: $ dark; bredde: 100%; polstring: $ space; @extend .box-dimensionering; ul text-align: center; li display: inline-block; bredde: 32px; højde: 32px; en tekst-dekoration: ingen; display: inline-block; bredde: 100%; højde: 100%; tekstindtryk: 100%; hvid-rum: nowrap; overløb: skjult;  

I dette afsnit viser vi de sociale medier ikoner ved hjælp af image sprite teknikken, og Compass har en funktion til at gøre det job hurtigere.

Først og fremmest skal vi sætte vores ikoner i en særlig mappe - lad os navngive mappen /social/, for eksempel. Tilbage i stilarket skal du sammenkoble disse ikoner med følgende @importere Herske.

 @import "social / * .png"; 

Det social/ ovenfor henvise til den mappe, hvor vi gemmer ikonerne. Denne mappe skal nestes i billedmappen. Nu, hvis vi kigger på i vores billedmappe, skal vi se et spritbillede genereret med tilfældige tegn, som social-sc805f18607.png. På dette tidspunkt sker der stadig ikke noget ved forenden, indtil vi anvender stilarterne med den følgende linje.

 @ omfatte alle social-sprites; 

Endeligt resultat

Til sidst, efter alt det hårde arbejde, kan vi nu se resultatet som dette:

Hvis vi tror det 500px er for bred senere, vi behøver kun at ændre værdien i $ bredde variabel - for eksempel, 350 pixel - resten vil “magisk” justeres. Du kan også eksperimentere med farvevariablen.

• Se Demo
• Download kilde

Konklusion

I denne vejledning har vi vist dig, hvordan du opbygger et simpelt online vCard med Sass og Compass; dette er kun et eksempel. Sass og Compass er faktisk stærke, men nogle gange er det ikke nødvendigt. For eksempel, når vi arbejder på et websted med et par sider og sandsynligvis også kun har brug for færre linjer af stilarter, bliver Sass og Compass betragtet som overdreven.

Dette indlæg lukker vores Sass-serie, og vi håber du har haft det. Hvis du har spørgsmål vedrørende dette emne, tøv ikke med at tilføje det i kommentarfeltet nedenfor.