Compass ist eine Tool-Bibliothek für Sass.
Compass kapselt eine Reihe nützlicher Module, die auf Sass basieren, um die Funktionalität von Sass zu ergänzen und zu bereichern.
Installation:
Compass ist in Ruby entwickelt Sprache, daher muss Ruby vor der Installation installiert werden.
Befehl:
gem install Compass
Projektinitialisierung:
So erstellen Sie Ihr Compass-Projekt: Wenn der Projektname „myproject“ lautet, befindet sich
compass create myproject
im aktuellen This Das Verzeichnis wird unter dem Verzeichnis generiert, das die Datei config.rb und zwei Unterverzeichnisse, sass und stylesheets, enthält. Ersteres speichert Sass-Quelldateien und letzteres speichert kompilierte
CSS-Dateien.
Zusammenstellung:
Was ich während der Entwicklung geschrieben habe, war eine Datei mit dem Dateisuffix scss. Nur wenn sie in CSS-Dateien kompiliert werden, können sie auf der Website verwendet werden. Der Kompilierungsbefehl von
compass ist
compass compile
. Dieser Befehl wird im Projektstammverzeichnis ausgeführt. Er kompiliert die scss-Datei im Unterverzeichnis sass und speichert sie im Unterverzeichnis stylesheets.
Die standardmäßig kompilierte CSS-Datei enthält viele Kommentare. Die Produktionsumgebung erfordert komprimierte CSS-Dateien.
compass-Kompilierung --Ausgabestil komprimiert.
Wenn Sie die unveränderte Datei neu kompilieren.
Kompass-Kompilierung --force
Zusätzlich zur Verwendung von Befehlsparametern können Sie den Kompilierungsmodus auch in der Konfigurationsdatei config.rb angeben.
output_style = :expanded
:expanded bedeutet, dass das ursprüngliche Format nach der Kompilierung beibehalten wird. Weitere Werte sind: verschachtelt,
:kompakt und komprimiert. Nach dem Eintritt in die Produktionsphase muss es geändert werden :komprimierter Modus.
output_style = :compressed
Sie können den Kompilierungsmodus auch intelligent bestimmen, indem Sie den Umgebungswert angeben (:produktion oder:entwicklung).
environment = :development
output_style = (environment == :produktion) ? :compressed : :expanded
Im Befehlszeilenmodus zusätzlich zu einmaligen Kompilierungsbefehlen auch Compass verfügt über einen automatischen Kompilierungsbefehl
Kompassuhr
Solange sich die SCSS-Datei ändert, wird sie automatisch in eine CSS-Datei kompiliert.
Kompassmodule
Kompass verwendet eine Modulstruktur. Verschiedene Module bieten unterschiedliche Funktionen und es gibt 5 integrierte Module.
CSS3-Layout-Typografie-Einheiten zurücksetzen
Modul zurücksetzen
Bevor Sie Ihre eigenen Stile schreiben, müssen Sie die Standardstile des Browsers zurücksetzen.
Die Schreibmethode lautet:
@import "compass/reset"
Der obige @import-Befehl wird verwendet, um das zu ladende Modul anzugeben, hier dient er zum Laden des Reset-Moduls. Nach der Kompilierung wird der entsprechende CSS-Reset-Code generiert.
CSS3-Modul
Dieses Modul stellt 24 CSS3-Befehle bereit. Zum Beispiel:
Die Art und Weise, abgerundete Ecken (border-radius) zu schreiben,
@import "compass/css3";
.rounded {
@include border-radius(5px);
}
Der obige @include-Befehl bedeutet den Aufruf eines Mixins (ähnlich einem Makro in der C-Sprache). 5px ist ein Parameter, der zur Angabe des Radius der Verrundung verwendet wird.
Der kompilierte Code ist:
.rounded {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-o-border-radius : 5px;
-ms-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
}
Wenn Sie nur brauchen Die obere linke Ecke ist abgerundet, geschrieben als
@include border-corner-radius(top, left, 5px);
Layoutmodul
Dieses Modul bietet Layoutfunktionen,
zum Beispiel Geben Sie eine Seite an. Der Fußzeilenbereich wird unten im Browser angezeigt.
@import "compass/layout";
#footer {
@include sticky-footer(54px);
}
Geben Sie an, dass das untergeordnete Element den Platz des übergeordneten Elements einnimmt:
@import "compass/layout";
#stretch-full {
@include stretch;
}
Typografiemodul
Dieses Modul bietet Vorlagenfunktionen
Für Geben Sie beispielsweise die Linkfarbe an. Das Mixin lautet:
link-colors($normal, $hover, $active, $visited, $focus);
Bei Verwendung lautet es:
@import "compass /typography";
a {
@include link-colors(#00c, #0cc, #c0c, #ccc, #cc0);
}
Dienstprogrammmodul
Dieses Modul bietet einige Funktionen anderer Module.
Zum Beispiel Clear Floating:
import "compass/utilities/";
.clearfix {
@include clearfix;
}
Zum Beispiel Tabelle:
@import "compass/utilities";
table {
@include table-scaffolding;
}
Nach der Kompilierung
table th {
text-align: center;
Schriftstärke: fett;
}
table td,
table th {
padding: 2px;
}
table td.numeric,
table th. numerisch {
text-align: right;
}
Hilfsfunktion
Kompass bietet neben Modulen auch eine Reihe von Funktionen.
Es gibt einige nützliche Funktionen: image-width() und image-height() geben die Breite und Höhe des Bildes zurück.
Ein weiteres Beispiel: inline-image() kann das Bild in Datenprotokolldaten umwandeln.
@import "compass";
.icon { background-image: inline-image("icon.png");}
Nach der Kompilierung erhalten wir
.icon { background -image: url('data:image/png;base64,iBROR...QmCC');}
Der Hauptunterschied zwischen der Funktion und Mixin besteht darin, dass der Befehl @include nicht verwendet werden muss und kann direkt angerufen werden.
Weitere Informationen zu Sass und Compass – zum Lesen verwandter Artikel finden Sie auf der chinesischen PHP-Website!
