Sass Tutorial Bygga ett online-vCard med Sass & Compass

 
 
  
 
 
Thoriq Firdaus
 
[email protected]
 
(+62) 1.2345.678.9
 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse dolor neque, eleifend på pellentesque quis, är det bara att säga. Etiam et auctor arcu.
 
 
 
 
 
 
Facebook
 
 Twitter
 
Google+
 
Dribbble
 
 
 
 

Som du kan se ovan ingår de sociala identiteterna i "sociala"avsnittet är strukturerat inom listelement så att vi enkelt kan visa dem sida vid sida. Var och en av dem får klassnamn enligt denna konvention social facebook, social-twitter, social google och så vidare.

Kompasskonfiguration

Vi behöver konfigurera Kompass lite genom att inte kommentera några rader config.rb fil, enligt följande:

 # Du kan välja din föredragna utskriftsstil här (kan överskridas via kommandoraden): output_style =: expanded # För att aktivera relativa sökvägar till tillgångar via kompasshjälpsfunktioner. Uncomment: relative_assets = true # Om du vill inaktivera felsökningskommentarer som visar din markörs ursprungliga plats. Okommande: line_comments = false 

Om du inte kan hitta config.rb filen har du förmodligen inte kört det här kommandot kompass init i din projektkatalog.

Importera filer

Eftersom vi ska använda kompass måste vi importera det med hjälp av;

 @ import "kompass"; 

Och det är min personliga preferens att återställa standardstilar från webbläsarna så att utmatningen blir mer konsekvent. Kompass har i detta fall en återställningsmodul. Den här modulen är baserad på Eric Meyers CSS-återställning och kan importeras med;

 @import "kompass / återställning"; 

Men jag föredrar att använda normalisera det tack och lov kommer också i Sass / Scss-format. Ladda ner filen här, spara den i sass arbetskatalog och importera den till vårt stilark.

 @import "normalisera"; 

Rekommenderad läsning: Granskning av CSS Style Priority Level

variabler

Vi kommer säkert att ha några konstanta värden i stilarket, så vi lagrar dem i variabler och dessa två variabler nedan definierar basfärgen på vår vCard.

 $ bas: #fff; $ mörk: mörkare ($ bas, 10%); 

Medan $ bredd Variabel nedan kommer att vara vår sidas bredd; Det kommer också att ligga till grund för att definiera andra elementstorlekar.

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

Och den $ utrymme variabel, som du kan se, blir standardavståndet eller kolumnstorleken i vårt vCard vilket i det här exemplet skulle vara 20px;

Compass har också hjälpare att upptäcka bildstorlek och vi kommer att använda denna funktion på vår bildprofil enligt följande:

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

Den extra Tillägg av (($ space / 4) * 2) i koden ovan är att beräkna den totala bildbredden inklusive gränsen som ramar bilden. En ram har vanligen två sidor; topp och botten / vänster och höger, det är därför vi multiplicerar divisionsresultat av 2.

Selector Arv

Det finns tydligen några valörer i vårt stylesheet som kommer att ha samma styling regler. För att undvika repetition i vår kod måste vi ange dessa stilar först och arva dem med @förlänga Direktiv vid behov. Denna metod, i Sass, är känd som Selector Arv, en mycket användbar funktion som saknas i mindre.

 .float-left float: left;  .box-dimensionering @include box-size-dimensionering (border-box);  

Styles

När allt som behövs har installerats, är det dags att ställa in vårt vCard, med en bakgrundsfärg till vårt HTML-dokument.

 html höjd: 100%; bakgrundsfärg: $ base;  

vCard

Följande stilar definierar vCard-omslaget. Om du har arbetat med MINDER tidigare, kommer den här koden att vara bekant för dig och lätt att smälta.

 .vcard width: $ width; marginal: 50px auto; bakgrundsfärg: mörkare ($ bas, 5%); gränsen: 1px solid $ dark; @ include border-radius (3px); ul vaddering: 0; marginal: 0; li list-style: none;  

Omslagets bredd ärverver värdet från $ bredd variabel. Bakgrundsfärgen är mörkare av 5% från basfärgen, medan gränsen färgar blir mörkare av 10%. Denna färgning uppnås med hjälp av Sass färgfunktioner.

VCard kommer också att ha 3px radie av rundade hörn som uppnås med användning av Compass CSS3 Mixins; border-radius (3px).

Bio-sektion

Som vi har noterat tidigt i denna handledning kan vCard delas upp i två sektioner. Dessa nestade stilar nedan kommer att definiera den första sektionen som innehåller bildprofilen med några detaljer (namn, e-post och telefon).

 .bio border-bottom: 1px solid $ dark; vaddering: $ space; @extend .box-dimensionering; img @extend .float-left; display: block; gräns: ($ space / 4) solid #ffffff;  .detail @extend .float-left; @extend .box-dimensionering; färg: mörkare ($ bas, 50%); marginal: vänster: $ space; botten: $ space / 2;  bredd: $ bredd - (($ space * 3) + $ img); li &: före bredd: $ space; höjd: $ space; marginal-höger: $ space; font-family: "ModernPictogramsNormal";  & .name: före innehåll: "f";  & .email: före innehåll: "m";  & .phone: före innehåll: "N";  

Det finns en sak från koden ovan som vi tycker att du måste göra ett meddelande. Bredden i .detalj väljaren specificeras med denna ekvation $ bredd - (($ space * 3) + $ img);.

Denna ekvation används för att dynamiskt beräkna detaljens bredd genom att subtrahera bildprofilens bredd och mellanslag (vaddering och marginal) från vCards totala bredd.

Social del

Stilarna nedan är för den andra sektionen i vCard. Det är faktiskt ingen skillnad med vanlig CSS här, bara nu är de nestade och några värden definieras med variabler.

 .social bakgrundsfärg: $ mörk; bredd: 100%; vaddering: $ space; @extend .box-dimensionering; ul text-align: center; li display: inline-block; bredd: 32px; höjd: 32px; en text-decoration: none; display: inline-block; bredd: 100%; höjd: 100%; textindelning: 100%; white-space: nowrap; översvämning: gömd;  

I det här avsnittet kommer vi att visa ikonerna för sociala medier med hjälp av bildsprite-tekniken, och Compass har en funktion för att göra det jobbet snabbare.

Först och främst måste vi lägga våra ikoner i en särskild mapp - låt oss namnge mappen /social/, till exempel. Tillbaka i stilarket kopplar du samman dessa ikoner med följande @importera regel.

 @import "social / *. png"; 

De social/ ovan hänvisar till mappen där vi lagrar ikonerna. Den här mappen ska vara näst i bildmappen. Nu, om vi tittar på i vår bildmapp, borde vi se en spritbild genererad med slumpmässiga tecken, som social sc805f18607.png. Vid det här tillfället händer ingenting fortfarande i fronten, tills vi använder stilerna med följande rad.

 @ inkludera alla-sociala-sprites; 

Slutresultat

Slutligen, efter allt det hårda arbetet kan vi nu se resultatet så här:

Om vi ​​tror det 500px är för bred senare behöver vi bara ändra värdet i $ bredd variabel - till exempel, 350 pixlar - resten kommer “magiskt” justeras. Du kan också experimentera med färgvariabeln.

• Visa demo
• Hämta källa

Slutsats

I denna handledning har vi visat dig hur man bygger ett enkelt online-vCard med Sass och Compass; Detta är bara ett exempel. Sass och Kompass är verkligen kraftfulla, men ibland är det inte nödvändigt. Till exempel, när vi arbetar på en webbplats med några sidor och förmodligen bara behöver färre linjer av stilar, använder Sass och Compass anses för överdriven.

Detta inlägg stänger vår Sass-serie och vi hoppas att du haft det. Om du har några frågor angående ämnet, tveka inte att lägga till det i kommentarfältet nedan.