Code

Wie schreibe ich einfache, elegante CSS mit Compass & Sass

Viele Designer verwenden irgendeine Art von CSS-Preprozessor, ob das sein sollte Sass , WENIGER oder Stift . Wenn Sie eine dieser Funktionen verwendet haben, werden Sie wahrscheinlich auch wissen, dass Compass ein Framework ist, das auf Sass basiert, und obwohl die Installation manchmal abschreckend ist, werden Sie schnell feststellen, dass es eine der besten Fähigkeiten überhaupt ist Webdesigner kann lernen.

Wenn Sie Sass noch nie zuvor benutzt haben, würde ich Ihnen empfehlen, sich die WDDs anzuschauen Einführung in Sass.

Compass funktioniert wie ein Framework für Ihr CSS. Wenn Sie an einem großen Projekt arbeiten, fällt es Ihnen leicht, dass Dinge außer Kontrolle geraten, und es ist oft eine Herausforderung, Dinge in Ihrem eigenen CSS zu finden. Compass versucht, diese Probleme zu beheben, mit dem zusätzlichen Vorteil, mit Herstellerpräfixen zu arbeiten.

Was ist Kompass?

Wie ich oben sagte, ist Compass ein Framework für Ihr CSS, das einige der Probleme mit der Sprache löst. Es enthält auch ein paar Tools, um die Entwicklung schneller und einfacher zu machen:

  • Wie Sass unterstützt Compass Variablen, Mixins und Nesting;
  • es bietet eine ganze Reihe von Hilfsfunktionen für Bilder, Farben, Typografie und mehr;
  • es unterstützt mathematische Berechnungen;
  • Dadurch wird die browserübergreifende Kompatibilität sichergestellt.

Genau wie Sass und LESS ist Compass nur ein Werkzeug, um das Website-Design zu vereinfachen.

Wie installiere ich Compass?

Compass ist ein Ruby-Juwel. Um es zu installieren, muss Ruby zuerst auf Ihrem Computer installiert sein. Glücklicherweise ist Ruby-Installation einfach, unter Windows müssen Sie nur das herunterladen Ruby-Installer für Windows , auf Mac / Linux folgen Sie den Anweisungen auf der Ruby-Website.

Sobald Sie Ruby installiert haben, ist die Installation von Compass so einfach: 

gem install compass

Dies wird sowohl Kompass als auch Sass installieren.

Wenn Sie ein Compass-Projekt erstellen möchten, geben Sie Folgendes ein: 

compass create /path/to/projectcd /path/to/projectcompass watch

Diese drei Codezeilen bedeuten, dass Sie bei jeder Änderung einer Sass-Datei automatisch in CSS kompiliert werden.

Alternativ könnten Sie verwenden Codekit (Mac) oder Präpros (Windows), um den Sass zu kompilieren, wenn er gespeichert wird.

Erste Schritte mit Compass

Compass ist in Module unterteilt, und um die Utilities nutzen zu können, müssen wir zunächst das gewünschte Modul in unsere .scss-Hauptdatei importieren. Um beispielsweise das CSS3-Modul zu importieren, würden wir Folgendes verwenden: 

@import "compass/css3";

Jetzt können wir die Utilities und Mixins verwenden, die Compass für die neuen Eigenschaften von CSS3 anbietet. Das Beste daran ist, dass wir die Hersteller-Präfixe nicht immer wieder eingeben müssen, was bei CSS3 immer ein Problem war.

Hier ein Beispiel: Wenn wir ein einfaches 3-Spalten-Layout mit einem 20-Pixel-Gutter erstellen wollten, müssten wir in CSS Folgendes eingeben: 

div{-webkit-column-count:3;-moz-column-count:3;column-count:3;-webkit-column-gap:20px;-moz-column-gap:20px;column-gap:20px;}

Sie können sehen, wie unübersichtlich unser Code schnell ist. Mit Hilfe von Compass und Sass brauchen wir nur: 

div{@include column-count(3);@include column-gap(20px);}

Wie Sie sehen können, haben wir die Vendor-Präfixe entfernt, und was dauerte 6 Zeilen CSS, die wir in nur 2 erreicht haben.

Ein weiteres Beispiel für CSS, das viel Tipparbeit erfordert, sind Farbverläufe. So würden wir einen einfachen Weiß-zu-Schwarz-Verlauf in CSS schreiben: 

.gradient{background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #000000));background-image: -webkit-linear-gradient(#ffffff, #000000);background-image: -moz-linear-gradient(#ffffff, #000000);background-image: -o-linear-gradient(#ffffff, #000000);background-image: linear-gradient(#ffffff, #000000);}

Das Erstellen des gleichen Effekts mit Compass ist so einfach wie: 

.gradient{@include background-image(linear-gradient(#fff, #000));}

Dies reduziert nicht nur die Menge an Code erheblich, sondern wenn Sie die Farben ändern möchten, müssen Sie sie in der Compass-Version nur einmal ändern.

Es gibt eine vollständige Liste der verkürzte CSS3-Eigenschaften hier.

Compass enthält auch einige Helfer für Links, von denen einer eine echte Zeitersparnis darstellt. Zuerst müssen wir das Typografiemodell als den Anfang unserer Haupt-Sass-Datei einfügen: 

@import "compass/typography"

Das Typografie-Modul hat eine gute Kurzschrift für Styling-Farben, wie folgt: 

a{// link colors (normal, hover, active, visited, focus)@include link-colors(red, blue, grey, red, blue);}

Das ist das Beste an Compass; Es nimmt den Code, den wir täglich verwenden, und gibt uns Kurzversionen.

Fazit

Dieser Artikel war nur eine kurze Einführung in Compass, aber wenn Sie das Thema so spannend fanden wie ich, würde ich Ihnen dringend raten Besuche ihre Website und erkunden Sie mehr der verfügbaren Dienstprogramme.

Ich hoffe, dass Sie jetzt Compass und Sass in Ihren Projekten verwenden, denn sie sind wirklich unglaubliche Ergänzungen der Toolbox des Webdesigners.

Benutzt du Kompass oder Sass? Bevorzugen Sie einen anderen Vorprozessor? Lassen Sie es uns in den Kommentaren wissen.

Ausgewähltes Bild / Vorschaubild, Kompassbild über Shutterstock.

sauer Kompass CSS-Vorverarbeitung Erste Schritte mit dem Kompass Wie installiere ich einen Kompass? Rubin Edelsteine