Begegnung mit Sass und Compass – Kapitel „Kompass'.

Dieser Artikel erklärt hauptsächlich den Inhalt von Compass. Wenn Sie nicht viel über Sass wissen, können Sie das Sass-Kapitel und Sass selbst lesen Nur ein „CSS-Präprozessor“, und Compass ist darin enthalten. Auf der Basis von Sass sind eine Reihe von Modulen und Vorlagen gekapselt, um die Funktionen von Sass zu ergänzen.

1.Kompass-Installation

Wie Sass wurde auch Compass in der Ruby-Sprache entwickelt, daher müssen Sie Ruby installieren, bevor Sie Sass installieren. Der Installationsprozess von Ruby wird nicht im Detail beschrieben. Nach der Installation von Ruby können Sie den folgenden Befehl direkt in die Befehlszeile eingeben

<code>sudo gem install compass
</code>

Windows wird in cmd eingegeben, das vorherige sudo muss jedoch weggelassen werden.

Unter normalen Umständen ist Compass (zusammen mit Sass) installiert.

2.Compass initialisiert ein Projekt

Als nächstes müssen wir ein eigenes Compass-Projekt erstellen, vorausgesetzt, der Name lautet learn-compass-init, und geben Sie dann

in die Befehlszeile ein

<code>compass create learn-compass-init
</code>

Ein Unterverzeichnis „learn-compass-init“ wird im aktuellen Verzeichnis generiert (Tipp: Windows-Spieler können die Umschalttaste gedrückt halten und mit der rechten Maustaste auf die Datei klicken, die erstellt werden muss, um hier ein Befehlszeilenfenster zu öffnen).

Geben Sie das gerade erstellte Unterverzeichnis ein

<code>cd learn-compass-init
</code>

Sie sehen die folgende Struktur, wobei die Datei config.rb die Projektkonfigurationsdatei ist. Es gibt auch zwei Unterverzeichnisse, sass und stylesheets. Ersteres speichert die Sass-Quelldateien, die wir schreiben müssen, und letzteres speichert die kompilierten CSS-Dateien

3.Compass kompiliert ein Projekt

Jeder, der Sass kennt, weiß, dass die von uns geschriebenen Dateien mit dem Suffix scss nur auf unserer Website verwendet werden können, wenn sie in CSS-Dateien kompiliert werden. Daher bietet Compass eine Reihe von Kompilierungsbefehlen. Führen Sie den folgenden Befehl im Stammverzeichnis des Projekts

aus

<code>compass compile
</code>

Die SCSS-Datei mit dem Suffixnamen im Unterverzeichnis Sass wird in eine CSS-Datei kompiliert und im Unterverzeichnis Stylesheets gespeichert.

Einige Leute werden sagen, dass es zu mühsam ist, die SCSS-Datei einmal zu ändern und die Compass-Kompilierung erneut ausführen zu müssen, daher bietet Compass auch die folgenden automatischen Kompilierungsbefehle

<code>compass watch
</code>

Nach dem Ausführen dieses Befehls wird die SCSS-Datei, sofern sie geändert wird, automatisch in die entsprechende CSS-Datei im Unterverzeichnis „Stylesheets“ kompiliert.

Standardmäßig enthält die kompilierte CSS-Datei viele Kommentare, wir benötigen jedoch nur die komprimierte CSS-Datei. In diesem Fall müssen Sie den folgenden Befehl verwenden

<code>compass compile --output-style compressed
</code>

4. Module in Compass

Comapss verwendet eine Modulstruktur. Verschiedene Module bieten unterschiedliche Funktionen. Im Folgenden werde ich mich auf die Hauptfunktionen jedes Moduls konzentrieren.

Compass verfügt über sechs integrierte Module, darunter die folgenden

<code>-   reset
-   css3
-   layout
-   typography
-   utilities
-   helpers
</code>

Reset-Modul: Es handelt sich um ein Browser-Reset-Modul, das Browserunterschiede verringert, d. h. die Unterschiede zwischen Browsern zurücksetzt.

Layout-Modul: Bietet die Möglichkeit, das Seitenlayout zu steuern, beispielsweise wenn die untergeordneten Elemente in einem Container horizontal und vertikal gefüllt werden.

Es ist zu beachten, dass nur das Reset-Modul und das Layout-Modul explizit importiert werden müssen, d. h. andere Module können importiert werden, solange @import „compass“ lautet.

css3-Modul: Bietet browserübergreifende CSS3-Funktionen. Ich bin davon überzeugt, dass Sie nach der erneuten Verwendung aufgrund des Hinzufügens von Browser-Präfixen nie wieder Kopfschmerzen haben werden.

Helfermodul: Enthält eine Reihe von Funktionen, die der Funktionsliste in Sass sehr ähnlich sind (selten verwendet, aber sehr leistungsstark).

Typografiemodul: Textstil und vertikalen Rhythmus ändern.

Dienstprogrammmodul: Man kann sagen, dass Compass alle Inhalte, die nicht in anderen Modulen platziert werden können, in dieses Modul einfügt.

Tatsächlich bietet Compass auch die Browser-Unterstützungsmethode: Sie wird hauptsächlich verwendet, um zu konfigurieren, welche Browser Compass standardmäßig unterstützt und welche Version des angegebenen Browsers standardmäßig unterstützt wird. Nach der Änderung wirkt sich dies auf die Ausgabe des anderen aus Sechs Module, die unterschiedliche Anpassungen für verschiedene Browser erfordern.

In den folgenden Artikeln werde ich die Verwendung und Funktionen jedes Moduls einzeln beschreiben.