Sass-zelfstudie Een online vCard bouwen met Sass & Compass

Vandaag gaan we onze discussie over Sass voortzetten en dit zal het laatste deel zijn van onze Sass-serie. Deze keer, in plaats van een theoretische benadering, zal dit een beetje meer praktisch zijn. We zullen samen met Compass een online vCard maken met behulp van Sass.

Het idee is dat de vCard gemakkelijk aanpasbaar moet zijn, voor kleur en grootte. In dit proces zullen we enkele Sass- en Compass-functies gebruiken zoals Variabelen, Mixins, Operaties, Selectoren Overerving, Geneste Regels en Compass Helpers. Als je onze vorige berichten uit deze serie hebt gemist, raden we je aan deze eerst te bekijken voordat je verdergaat.

Planning en wireframing

Bij het werken met Sass en Compass, planning is essentieel. We moeten meestal een goed beeld hebben van hoe ons uiteindelijke resultaat (bijvoorbeeld pagina of website) zal zijn. Het is handig om op bepaalde sites te browsen zoals Behance of Dribbble voor ideeën. Vervolgens kunnen we de ideeën op papier zetten of in een draadframe construeren, zoals in onderstaand voorbeeld.

Zoals je kunt zien aan de afbeelding hierboven, bevat onze vCard contact informatie over 'John' - een fotoprofiel, wat informatie over John, zoals zijn naam, e-mailadres, telefoonnummer en een korte beschrijving van wie hij is of wat hij doet. Dat zal onze 'bio'-sectie zijn.

Hieronder zijn sociale identiteiten in de vorm van sociale knoppen. Dit wordt onze 'sociale' sectie.

Activa voorbereiden

Voordat we beginnen met coderen, zijn hier enkele essentiële dingen om je voor te bereiden. Ik begrijp dat je nu Sass en Compass op je computer moet hebben geïnstalleerd.

(Als u niet zeker weet of u ze hebt geïnstalleerd, kunt u deze opdracht uitvoeren sass -v of kompas -v door Command Prompt of Terminal of u kunt altijd een applicatie als de Scout-app gebruiken als u liever met een grafische gebruikersinterface werkt.)

We hebben ook een aantal middelen nodig, zoals lettertypepictogrammen en pictogrammen voor sociale media, die u kunt krijgen van plaatsen als ModernPictograms.

Ten slotte moeten we, omdat we Command Prompt / Terminal gebruiken voor deze tutorial, naar onze directory navigeren en Compass-project uitvoeren met deze twee opdrachten: kompas init en kompas kijken.

HTML-markup

Hieronder staat de HTML-markering van onze vCard, het is vrij eenvoudig. Alle secties zijn verpakt in logische HTML5-tag

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

Zoals je hierboven kunt zien, zijn de sociale identiteiten opgenomen in de 'sociale'sectie is gestructureerd binnen lijstelementen, zodat we ze gemakkelijk naast elkaar kunnen weergeven. Elk van hen krijgt een klasnaam volgens deze conventie sociaal-facebook, sociaal-twitter, sociaal-google enzovoorts.

Compass-configuratie

We moeten Compass een beetje configureren door een paar regels in te klaren config.rb bestand, als volgt:

 # U kunt hier uw gewenste uitvoerstijl selecteren (kan via de opdrachtregel worden opgeheven): output_style =: expanded # Om relatieve paden naar assets in te schakelen via kompashelperfuncties. Uncomment: relative_assets = true # Foutopsporing bij opmerkingen uitschakelen die de oorspronkelijke locatie van uw selectors weergeven. Uncomment: line_comments = false

Als je het niet kunt vinden config.rb bestand, hebt u waarschijnlijk deze opdracht niet uitgevoerd kompas init in uw projectdirectory.

Bestanden importeren

Omdat we Compass zullen gebruiken, moeten we het importeren met behulp van;

 @import "kompas";

En het is mijn persoonlijke voorkeur om standaardstijlen opnieuw in te stellen vanuit de browsers, zodat de uitvoer consistenter wordt weergegeven. Kompas heeft in dit geval een resetmodule. Deze module is gebaseerd op Eric Meyer's CSS-reset en kan worden geïmporteerd met behulp van;

 @import "kompas / reset";

Ik gebruik dit echter liever met Normalize komt ook in Sass / Scss-formaat. Download het bestand hier, sla het op sass werkmap en importeer deze in ons stylesheet.

 @import "normaliseren";

Aanbevolen lezing: Herziening van prioriteitsniveau van CSS-stijl

Variabelen

We zullen zeker een paar constante waarden in het stylesheet hebben, dus zullen we ze opslaan in variabelen en deze twee variabelen hieronder zullen de basiskleur van onze vCard bepalen.

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

Terwijl de $ breedte onderstaande variabele is de breedte van onze pagina; het zal ook de basis zijn voor het definiëren van andere elementgroottes.

 $ width: 500px; $ spatie: $ width / 25; // = 20 px

En de $ ruimte variabele, zoals u kunt zien, is de standaardafstand of kolomgrootte in onze vCard die in dit voorbeeld zou zijn 20px;

Compass heeft ook Helpers om beeldafmetingen te detecteren en we zullen deze functie als volgt gebruiken in ons beeldprofiel;

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

De extra toevoeging van (($ spatie / 4) * 2) in de bovenstaande code, is het berekenen van de totale beeldbreedte inclusief de rand die de afbeelding zal kaderen. Een frame heeft over het algemeen twee zijden; boven en onder / links en rechts, daarom vermenigvuldigen we het resultaat van de divisie door 2.

Selector Inheritance

Er zijn blijkbaar een paar selectors in ons stylesheet die dezelfde stijlregels zullen hebben. Om herhaling in onze code te voorkomen, moeten we deze stijlen eerst specificeren en deze erven met de @uitbreiden richtlijn indien nodig. Deze methode staat in Sass bekend als Selector Inheritance, een zeer nuttige functie die ontbreekt in LESS.

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

stijlen

Wanneer alles wat nodig is is ingesteld, is het tijd om onze vCard te stylen, te beginnen met een achtergrondkleur in ons HTML-document;

 html height: 100%; achtergrondkleur: $ basis;

vCard

De volgende stijlen definiëren de vCard-wrapper. Als u eerder met LESS hebt gewerkt, zal deze code u bekend en gemakkelijk verteerbaar zijn.

 .vcard width: $ width; marge: 50px auto; achtergrondkleur: donkerder ($ basis, 5%); border: 1px solid $ dark; @ include border-radius (3px); ul opvulling: 0; marge: 0; li lijststijl: geen;

De breedte van de wraver neemt de waarde over van $ breedte variabel. De achtergrondkleur is donkerder door 5% van de basiskleur, terwijl de randkleur donkerder wordt door 10%. Deze kleuring wordt bereikt met behulp van Sass-kleurfuncties.

De vCard heeft ook 3px straal van afgeronde hoeken die wordt bereikt met behulp van Compass CSS3 Mixins; border-radius (3px).

Bio Section

Zoals we al eerder in deze tutorial hebben opgemerkt, kan de vCard in twee secties worden verdeeld. Deze geneste stijlen hieronder definiëren het eerste gedeelte dat het beeldprofiel bevat met een paar details (naam, e-mail en telefoon).

 .bio border-bottom: 1px solid $ dark; opvulling: $ spatie; @extend .box-sizing; img @extend .float-left; weergave: blok; border: ($ space / 4) solid #ffffff;  .detail @extend .float-left; @extend .box-sizing; kleur: donkerder ($ base, 50%); marge: links: $ spatie; onderaan: $ spatie / 2;  width: $ width - (($ space * 3) + $ img); li &: voor width: $ spatie; hoogte: $ spatie; margin-right: $ space; font-family: "ModernPictogramsNormal";  & .name: before content: "f";  & .email: before content: "m";  & .phone: before content: "N";

Er is één ding uit de bovenstaande code dat we denken dat je een melding moet maken. De breedte in .detail- selector wordt gespecificeerd met deze vergelijking $ width - (($ spatie * 3) + $ img);.

Deze vergelijking wordt gebruikt om de details dynamisch te berekenen breedte door de breedte van het beeldprofiel en de spaties (opvulling en marge) af te trekken van de totale breedte van de vCard.

Sociale sectie

De onderstaande stijlen zijn voor het tweede gedeelte in de vCard. Er is hier geen verschil met gewone CSS, alleen nu zijn ze genest en worden enkele waarden gedefinieerd met variabelen.

 .sociaal achtergrondkleur: $ donker; breedte: 100%; opvulling: $ spatie; @extend .box-sizing; ul text-align: center; li display: inline-block; breedte: 32px; hoogte: 32 px; een text-decoration: none; weergave: inline-block; breedte: 100%; hoogte: 100%; tekst-inspringing: 100%; white-space: nowrap; overloop verborgen;

In deze sectie zullen we de social media-pictogrammen weergeven met behulp van de beeldspritechniek en Compass heeft een functie om die taak sneller uit te voeren.

Allereerst moeten we onze pictogrammen in een speciale map plaatsen - laten we de map een naam geven / Sociale /, bijvoorbeeld. Terug in het stylesheet, voegt u die pictogrammen samen met het volgende @importeren regel.

 @import "social / *. png";

De sociale / hierboven verwijzen we naar de map waarin we de pictogrammen opslaan. Deze map moet worden genest in de map met afbeeldingen. Als we nu naar onze afbeeldingsmap kijken, zien we een sprite-afbeelding die is gegenereerd met willekeurige tekens, zoals sociaal-sc805f18607.png. Op dit moment gebeurt er niets aan de voorkant, totdat we de stijlen toepassen met de volgende regel.

 @ omvatten alle sociale-sprites;

Eindresultaat

Eindelijk, na al het harde werk kunnen we het resultaat nu als volgt zien:

Als we dat denken 500px is te breed later, we hoeven alleen de waarde in te wijzigen $ breedte variabele - bijvoorbeeld, 350px - de rest zal “bij toverslag” wees aangepast. Je kunt ook met de kleurenvariabele experimenteren.

Demo bekijken
Download de bron

Conclusie

In deze zelfstudie hebben we u laten zien hoe u een eenvoudige online vCard kunt bouwen met Sass en Compass; dit is slechts een voorbeeld. Sass en Compass zijn inderdaad krachtig, maar soms is het niet nodig. Als we bijvoorbeeld werken aan een website met een paar pagina's en waarschijnlijk ook minder lijnen met stijlen nodig hebben, wordt het gebruik van Sass en Compass als overdreven beschouwd.

Dit bericht sluit onze Sass-serie en we hopen dat je het leuk vond. Als u vragen heeft over dit onderwerp, aarzel dan niet om het toe te voegen in het opmerkingenveld hieronder.