Syntaktisch fantastische Stylesheets mit Compass in Sass

In unserem letzten Beitrag haben wir schon einmal über Compass gesprochen. Laut der offiziellen Seite wird es als beschrieben ein Open-Source-CSS-Authoring-Framework.

Kurz gesagt, Compass ist eine Sass-Erweiterung, und genau wie LESS Element of LESS enthält es eine Reihe von gebrauchsfertigen CSS3-Mixins, außer, dass es auch einige andere Elemente hinzugefügt hat, die Sass zu einem leistungsfähigeren Begleiter-Tool machen. Lass es uns überprüfen.

Kompass installieren

Kompass wie Sass, muss in unserem System installiert sein. Wenn Sie jedoch eine Anwendung wie Scout App oder Compass.app verwenden, ist dies nicht erforderlich.

Ohne sie müssen Sie es tun “manuell” durch Terminal / Eingabeaufforderung. Geben Sie dazu die folgende Befehlszeile ein.

Auf einem Mac / Linux-Terminal

 Sudo-Edelstein installieren Kompass 

An der Windows-Eingabeaufforderung

 gem installieren kompass 

Wenn die Installation erfolgreich ist, sollten Sie eine Benachrichtigung erhalten (siehe unten).

Führen Sie dann die folgende Befehlszeile in Ihrem Arbeitsverzeichnis aus, um hinzuzufügen Kompass-Projektdateien.

 Kompass init 

Lesen Sie weiter: Kompass-Befehlszeilendokumentation

Kompasskonfiguration

Wenn Sie diesen Befehl ausgeführt haben Kompass init, Sie sollten jetzt eine Datei mit dem Namen haben config.rb in Ihrem Arbeitsverzeichnis. Diese Datei wird zur Konfiguration der Projektausgabe verwendet. Beispielsweise können wir unsere bevorzugten Verzeichnisnamen ändern.

 http_path = "/" css_dir = "css" sass_dir = "scss" images_dir = "img" javascripts_dir = "js" 

Entfernen Sie die Kommentarzeile, die von Compass generiert wird. legen wir fest wahr wenn wir die Kommentare drucken möchten oder falsch wenn es nicht muss.

 line_comments = false 

Wir können auch die CSS-Ausgabe bestimmen. Es gibt vier Optionen, die wir auswählen können : erweitert, :kompakt, : komprimiertund : verschachtelt. Im Moment brauchen wir nur eine Erweiterung, da wir uns noch in der Entwicklungsphase befinden.

 output_style =: erweitert 

Ich denke, diese Konfigurationen werden für die meisten Projekte im Allgemeinen ausreichen, aber Sie können immer auf diese Dokumentation, Compass Configuration Reference, Bezug nehmen, wenn Sie weitere Einstellungen benötigen.

Zum Schluss müssen wir sehen jede Datei im Verzeichnis mit dieser Befehlszeile;

 Kompassuhr 

Diese Befehlszeile überwacht, wie in Sass, jede Dateiänderung und erstellt oder aktualisiert die entsprechenden CSS-Dateien. Denken Sie jedoch daran, diese Zeile auszuführen, nachdem Sie das Projekt in konfiguriert haben config.rb, Andernfalls werden die Änderungen in der Datei einfach ignoriert.

CSS3 Mixins

Bevor wir durch CSS3 gehen, in unserem primären .scss Datei, müssen wir den Kompass mit der folgenden Zeile importieren @import "Kompass";, Dadurch werden alle Erweiterungen in Compass importiert. Wenn wir jedoch nur CSS3 benötigen, können wir dies auch mit dieser Zeile spezifizieren @import "compass / css3".

Lesen Sie weiter: Kompass CSS3.

Beginnen wir nun mit Saas und Compass. Vorausgesetzt, Sie haben auch eines erstellt, fügen wir im HTML-Dokument die folgende einfache Markierung ein:

Die Idee ist auch einfach; Wir werden eine gedrehte Box mit abgerundeten Ecken erstellen. Nachfolgend finden Sie unsere verschachtelten Sass-Stile für den Starter.

 body Hintergrundfarbe: # f3f3f3;  Abschnitt Breite: 500px; Marge: 50px Auto 0; div Breite: 250px; Höhe: 250px; Hintergrundfarbe: #ccc; Marge: 0 auto;  

Um unserem Rechteck die abgerundeten Ecken zu geben, können Sie die Compass-CSS3-Mixins wie folgt einfügen:

 body Hintergrundfarbe: # f3f3f3;  Abschnitt Breite: 500px; Marge: 50px Auto 0; div Breite: 250px; Höhe: 250px; Hintergrundfarbe: #ccc; Marge: 0 auto; @umgrenzungsradius einschließen;  

Diese Grenzradius Mixins generiert alle Browser-Präfixe. Standardmäßig wird der Eckenradius verwendet 5px. Wir können aber auch den Radius unserer Bedürfnisse auf diese Weise angeben @umschließen den Grenzradius (10px); .

 Abschnitt div width: 250px; Höhe: 250px; Hintergrundfarbe: #ccc; Marge: 0 auto; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; Grenzradius: 10px;  

Als nächstes drehen wir als Plan auch die Box. Mit Compass ist das wirklich einfach. Alles, was wir tun müssen, ist, die Transformationsmethode aufzurufen.

 body Hintergrundfarbe: # f3f3f3;  Abschnitt Breite: 500px; Marge: 50px Auto 0; div Breite: 250px; Höhe: 250px; Hintergrundfarbe: #ccc; Marge: 0 auto; @umschließen den Grenzradius (10px); @ einschließen drehen;  

Diese Mixins erzeugen auch diese langwierigen Herstellerpräfixe und die Drehung dauert standardmäßig 45 Grad. Siehe das generierte CSS unten.

 Abschnitt div width: 250px; Höhe: 250px; Hintergrundfarbe: #ccc; Marge: 0 auto; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; Grenzradius: 10px; -webkit-transform: drehen (45 Grad); -Moz-Transformation: drehen (45 Grad); -ms-transform: drehen (45 Grad); -o-transform: drehen (45 Grad); verwandeln: drehen (45 Grad);  

Kompasshelfer

Eine der mächtigsten Funktionen in Compass sind die Helfer. Laut der offiziellen Website, Die Kompasshelfer sind Funktionen, die die von Sass bereitgestellten Funktionen erweitern. In Ordnung, lassen Sie uns die folgenden Beispiele betrachten, um ein klares Bild zu erhalten.

Hinzufügen von @ Font-Face-Dateien

In diesem Beispiel fügen wir eine benutzerdefinierte Schriftfamilie mit hinzu @Schriftart Regel. In einfachen CSS3-Dateien sieht der Code wie folgt aus, der aus vier verschiedenen Schriftarttypen besteht, und für manche Benutzer ist er schwer zu merken.

 @ font-face font-family: "MyFont"; src: url ('/ fonts / font.ttf') format ('truetype'), url ('/ fonts / font.otf') format ('opentype'), url ('/ fonts / font.woff') ('woff'), url ('/ fonts / font.eot') format ('embedded-opentype');  

Mit Kompass wir können das leichter mit machen Schriftdateien () Helfer;

 @include font-face ("MyFont", Font-Dateien ("font.ttf", "font.otf", "font.woff", "font.eot")); 

Der obige Code erzeugt ein Ergebnis, das genau dem ersten Code-Snippet entspricht. Außerdem wird der Schrifttyp automatisch erkannt und dem hinzugefügt Format() Syntax.

Wenn wir uns jedoch den Code genau ansehen, werden Sie feststellen, dass wir den Schriftpfad nicht hinzugefügt haben (/ Schriftarten /). Woher wusste Compass, wo sich die Schriftarten befinden? Lassen Sie sich nicht verwirren, dieser Pfad leitet sich eigentlich von ab config.rb mit fonts_path Eigentum;

 fonts_dir = "fonts" 

Nehmen wir an, wir ändern es in fonts_dir = "myfonts", dann wird der generierte Code sein URL ('/ myfonts / font.ttf'). Wenn wir den Pfad nicht angeben, leitet Compass ihn standardmäßig an Stylesheets / Schriftarten.

Bild hinzufügen

Lassen Sie uns ein weiteres Beispiel erstellen, dieses Mal fügen wir ein Bild hinzu. Das Hinzufügen von Bildern über CSS ist üblich. Wir machen dies im Allgemeinen mit der Hintergrundbild Eigentum wie so;

 div Hintergrundbild: URL ('/ img / the-image.png');  

In Compass, anstatt die URL () Funktion können wir es mit ersetzen Bild URL() Helfer und ähnliches @Schriftart oben können wir den Pfad vollständig ignorieren und Compass den Rest erledigen lassen.

Dieser Code generiert auch die gleiche CSS-Deklaration wie im ersten Snippet.

 div Hintergrundbild: Image-URL (the-image.png);  

Darüber hinaus enthält Compass auch Bildbemaßungshilfsprogramme, die hauptsächlich die Breite und Höhe des Bildes erkennen. Wenn Sie also beide in unserem CSS angeben müssen, können Sie wie folgt zwei weitere Zeilen hinzufügen.

 div Hintergrundbild: Bild-URL ("images.png"); Breite: Bildbreite ("images.png"); height: image-height ("images.png");  

Die Ausgabe wird in etwa so aussehen;

 div Hintergrundbild: URL ('/ img / images.png? 1344774650'); Breite: 80px; Höhe: 80px;  

Lesen Sie weiter: Kompass-Hilfsfunktionen

Letzter Gedanke

Okay, wir haben heute viel über Compass diskutiert, und wie Sie sehen können, ist es wirklich ein mächtiges Werkzeug, mit dem wir CSS eleganter schreiben können.

Und wie Sie bereits wussten, ist Sass nicht der einzige CSS-Präprozessor; Es gibt auch WENIGER, über den wir vorher ausführlich gesprochen haben. Im nächsten Beitrag werden wir versuchen, Kopf-an-Kopf-Tests zu vergleichen, welche der beiden die Aufgabe erfüllt, CSS besser zu verarbeiten.

• Quelle herunterladen