sass
Kompass-CSS3-Mixins
Suche…
Einführung
Erste Schritte mit Sass Exentsion Compass. Compass ist sehr nützlich im Umgang mit CSS3, da es Mixins zum Schreiben von 1 Zeile zur Unterstützung aller Browser mit CSS3-Funktionen bereitstellt. Es ist auch großartig, Sprite-Bilder hinzuzufügen.
Umgebung einrichten
Öffnen Sie Ihre Befehlszeile
Installation mit Ruby
gem update --system
gem install compass
Erstellen Sie ein Projekt
compass create <myproject>
Dadurch wird ein Kompassprojekt initialisiert. Es wird ein Ordner namens hinzugefügt. Der Ordner sieht wie folgt aus:
| Aktenordner | Beschreibung |
|---|---|
| sass / | Legen Sie Ihre sass / scss-Dateien in diesen Ordner |
| Stylesheets / | In diesem Ordner werden Ihre kompilierten CSS gespeichert |
| config.rb | Kompass konfigurieren - zB Ordnerpfad, Sass-Kompilierung |
Kompass verwenden
compass watch
Dadurch werden Ihre Sass-Dateien bei jeder Änderung kompiliert. Der Sass-Ordnerpfad kann in der config.rb geändert werden
CSS3 mit Kompass verwenden
Auf dieser Seite finden Sie eine vollständige Referenz, welche CSS3-Komponenten unterstützt werden
Um CSS3 in Ihrem Projekt verwenden zu können, bietet Compass Mixins zur Unterstützung der CSS3-Funktionen in jedem Browser. Zusätzlich zu Ihrer Sass / Scss-Datei müssen Sie angeben, dass Sie Kompass verwenden möchten
@import "compass/css3";
Grenzradius
Fügen Sie den Randradius mit dem Kompass in Ihre Sass-Datei ein:
div {
@include border-radius(4px);
}
CSS-Ausgabe
div {
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
}
Wie Sie sehen, können Sie den normalen CSS-Namen verwenden. Setzen Sie einfach @include davor und verwenden Sie (), um Ihren Wert festzulegen.
Flexbox-Beispiel
.row {
@include display-flex;
@include flex-direction(row);
}
CSS-Ausgabe
.row {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
}
Fazit
Dies sind nur zwei Beispiele. Compass bietet viel mehr CSS3-Mixins. Es ist sehr praktisch, Compass zu verwenden, und Sie müssen nicht befürchten, dass Sie die Definition einer CSS3-Komponente für einen angegebenen Browser vergessen haben. Wenn der Browser die CSS3-Funktion unterstützt, wird sie von compass für Sie definiert.