Sass Tutorial Erstellen einer Online-VCard mit Sass & Compass

 
 
  
 
 
Thoriq Firdaus
 
[email protected]
 
(+62) 1,2345,678,9
 
Lorem ipsum dolor sitzt amet, consectetur adipiscing elit. Suspendisse dolor neque, bei pellentesque quis bestens aufgeräumt, convallis sitzen amet tellus. Etiam et auctor arcu.
 
 
 
 
 
 
Facebook
 
 Twitter
 
Google+
 
Dribbble
 
 
 
 

Wie Sie oben sehen können, sind die sozialen Identitäten in den „sozialen“Der Abschnitt ist innerhalb von Listenelementen strukturiert, sodass wir sie problemlos nebeneinander anzeigen können. Jeder von ihnen erhält nach dieser Konvention einen Klassennamen Social-Facebook, Social-Twitter, Social-Google und so weiter.

Kompasskonfiguration

Wir müssen Compass ein wenig konfigurieren, indem wir einige Zeilen auskommentieren config.rb Datei wie folgt:

 # Sie können hier Ihren bevorzugten Ausgabestil auswählen (kann über die Befehlszeile überschrieben werden): output_style =: expand # Um relative Pfade zu Assets über Kompasshilfsfunktionen zu aktivieren. Uncomment: relative_assets = true # Deaktiviert die Debugging-Kommentare, die den ursprünglichen Speicherort Ihrer Selektoren anzeigen. Kommentar unkommentiert: line_comments = false 

Wenn Sie nicht finden können config.rb Datei, Sie haben diesen Befehl wahrscheinlich nicht ausgeführt Kompass init in Ihrem Projektverzeichnis.

Dateien importieren

Da wir Compass verwenden werden, müssen wir ihn mit importieren.

 @import "Kompass"; 

Es ist meine persönliche Präferenz, die Standardstile der Browser zurückzusetzen, damit die Ausgabe einheitlicher dargestellt wird. Compass verfügt in diesem Fall über ein Reset-Modul. Dieses Modul basiert auf Eric Meyers CSS-Reset und kann mit importiert werden;

 @import "kompass / reset"; 

Ich ziehe es jedoch vor, das zum Glück normalisieren kommt auch im Sass / Scss-Format. Laden Sie die Datei hier herunter und speichern Sie sie in sass Arbeitsverzeichnis und importieren Sie es in unser Stylesheet.

 @import "normalisieren"; 

Literatur-Empfehlungen: Überprüfen der Prioritätsstufe des CSS-Stils

Variablen

Wir werden sicherlich einige konstante Werte im Stylesheet haben, also werden wir sie in Variablen speichern. Diese beiden Variablen definieren die Grundfarbe unserer vCard.

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

Während $ width Variable unten wird die Breite unserer Seite sein; es ist auch die Basis für die Definition anderer Elementgrößen.

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

Und das $ space Wie Sie sehen, wird Variable der voreingestellte Abstand oder die Spaltengröße in unserer vCard sein, die in diesem Beispiel der Fall wäre 20px;

Compass verfügt auch über Helfer zur Ermittlung der Bildgröße. Diese Funktion wird in unserem Bildprofil wie folgt verwendet:

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

Das Extra Zusatz von (($ space / 4) * 2) Im obigen Code wird die Gesamtbildbreite einschließlich des Rahmens berechnet, der das Bild umrahmt. Ein Rahmen hat im Allgemeinen zwei Seiten; oben und unten / links und rechts, Deshalb multiplizieren wir die Divisionsergebnis durch 2.

Selector Vererbung

Es gibt anscheinend einige Selektoren in unserem Stylesheet, die dieselben Stilregeln haben. Um Wiederholungen in unserem Code zu vermeiden, müssen wir diese Stile zunächst festlegen und mit dem erben @erweitern Direktive wann immer nötig. Diese Methode wird in Sass als bezeichnet Selector Vererbung, eine sehr nützliche Funktion, die in LESS fehlt.

 .Float-Left Float: Links;  .box-sizeizing @include-Boxgröße (Randfeld);  

Styles

Wenn alles Notwendige eingerichtet wurde, ist es an der Zeit, unsere vCard zu gestalten, beginnend mit einer Hintergrundfarbe zu unserem HTML-Dokument.

 html Höhe: 100%; Hintergrundfarbe: $ base;  

vCard

Die folgenden Stile definieren den vCard-Wrapper. Wenn Sie zuvor mit LESS gearbeitet haben, ist Ihnen dieser Code bekannt und leicht zu verdauen.

 .vcard width: $ width; Marge: 50px auto; Hintergrundfarbe: dunkler ($ base, 5%); Rand: 1px durchgehend dunkel; @umschließen den Grenzradius (3px); ul padding: 0; Marge: 0; li list-style: none;  

Die Breite des Wrappers erbt den Wert von $ width Variable. Die Hintergrundfarbe ist um dunkler 5% von der Grundfarbe, während die Randfarbe um. dunkler ist 10%. Diese Farbgebung wird mit Sass-Farbfunktionen erreicht.

Die vCard wird auch haben 3px Radius abgerundeter Ecken, der mit Compass CSS3 Mixins erzielt wird; Randradius (3px).

Bio-Bereich

Wie wir bereits in diesem Tutorial bemerkt haben, kann die vCard in zwei Abschnitte unterteilt werden. Diese geschachtelten Stile definieren den ersten Abschnitt, der das Bildprofil enthält, und enthält einige Details (Name, E-Mail-Adresse und Telefon)..

 .bio border-bottom: 1px solid $ dark; Auffüllen: $ space; @extend .box-Sizing; img @extend .float-left; Bildschirmsperre; border: ($ space / 4) fest #ffffff;  .detail @extend .float-left; @extend .box-Sizing; Farbe: dunkler ($ Base, 50%); margin: left: $ Leerzeichen; unten: $ space / 2;  width: $ width - (($ space * 3) + $ img); li &: before width: $ space; Höhe: $ Raum; Rand rechts: $ Leerzeichen; Schriftfamilie: "ModernPictogramsNormal";  & .name: vor content: "f";  & .email: vor content: "m";  & .phone: before content: "N";  

Es gibt eine Sache aus dem obigen Code, von der wir glauben, dass Sie eine Benachrichtigung benötigen. Die Breite in .Detail Selektor wird mit dieser Gleichung angegeben $ width - (($ space * 3) + $ img);.

Diese Gleichung wird zur dynamischen Berechnung der Details verwendet Breite durch Subtrahieren der Breite des Bildprofils und der Zwischenräume (Abstand und Abstand) von der Gesamtbreite der vCard.

Sozialer Abschnitt

Die folgenden Stile beziehen sich auf den zweiten Abschnitt der vCard. Es gibt hier eigentlich keinen Unterschied zu einfachem CSS, erst jetzt sind sie verschachtelt und einige Werte sind mit Variablen definiert.

 .soziale Hintergrundfarbe: $ dunkel; Breite: 100%; Auffüllen: $ space; @extend .box-Sizing; ul text-align: center; li Anzeige: Inline-Block; Breite: 32px; Höhe: 32px; eine Textdekoration: keine; Anzeige: Inline-Block; Breite: 100%; Höhe: 100%; Text Gedankenstrich: 100%; Leerraum: Nowrap; Überlauf versteckt;  

In diesem Abschnitt werden die Social Media-Symbole mit der Image-Sprite-Technik angezeigt. Compass verfügt über eine Funktion, mit der diese Arbeit schneller erledigt werden kann.

Zunächst müssen wir unsere Icons in einem speziellen Ordner ablegen - nennen wir den Ordner /Sozial/, zum Beispiel. Verketten Sie diese Symbole wieder im Stylesheet mit den folgenden @einführen Regel.

 @import "social / *. png"; 

Das Sozial/ oben beziehen sich auf den Ordner, in dem die Symbole gespeichert werden. Dieser Ordner sollte im Bildordner verschachtelt sein. Wenn wir nun einen Blick in unseren Bildordner werfen, sollten wir ein Sprite-Bild mit zufälligen Zeichen wie social-sc805f18607.png. Zu diesem Zeitpunkt passiert am Front-End noch nichts, bis wir die Stile mit der folgenden Zeile anwenden.

 @ umfassen alle sozialen Sprites; 

Endergebnis

Nach all der harten Arbeit können wir das Ergebnis nun so sehen:

Falls wir das denken 500px zu breit ist, müssen Sie nur den Wert in ändern $ width Variable - zum Beispiel, 350px - der Rest wird “magisch” angepasst werden. Sie können auch mit der Farbvariablen experimentieren.

• Demo anzeigen
• Quelle herunterladen

Fazit

In diesem Tutorial haben wir Ihnen gezeigt, wie Sie eine einfache Online-VCard mit Sass und Compass erstellen. Dies ist jedoch nur ein Beispiel. Sass und Kompass sind zwar mächtig, aber manchmal nicht notwendig. Wenn wir beispielsweise an einer Website mit wenigen Seiten arbeiten und wahrscheinlich auch nur weniger Stilzeilen benötigen, wird die Verwendung von Sass und Compass als übertrieben angesehen.

Dieser Beitrag schließt unsere Sass-Serie und wir hoffen, es hat Ihnen gefallen. Wenn Sie Fragen zu diesem Thema haben, zögern Sie nicht, sie in das Kommentarfeld unten einzufügen.