Share
Sass könnte möglicherweise als CSS 2.0 bezeichnet werden. Es verfügt über einige wirklich raffinierte Funktionen, mit denen Sie Ihren Code in kürzerer Zeit und mit mehr Flexibilität schreiben können. Im heutigen Artikel werden wir an den Grundlagen arbeiten!
Sass ist einfach eine andere Art, mit CSS zu arbeiten. Es ermöglicht Ihnen, Ihren CSS-Code sehr einfach zu halten und die Lesbarkeit zu verbessern. Es braucht so etwas:
Und macht daraus:
Sass findest du unter http://sass-lang.com/
Compass macht die Arbeit mit Sass noch einfacher. Der Autor, Chris Eppstein, hat auch einige konvertierte Frameworks wie Blueprint, YUI und 960.gs eingefügt. Es lässt sich problemlos in Ruby-basierte Projekte integrieren, ist jedoch genauso einfach in jedes andere Projekt einzufügen. Compass ist Open Source und sehr gut dokumentiert. Überprüfen Sie die Quelle und die Dokumentation.
Sowohl Sass (das Teil des Haml-Projekts ist) als auch Compass werden über RubyGems installiert. Wenn Sie keine Ahnung haben, worüber ich spreche, lesen Sie "Schritt 1 - Ruby on Rails installieren" in meinem vorherigen Artikel "Ruby on Rails for Designers" und folgen Sie den Schritten bis zum Abschnitt "Installieren von Rails"..
Um beide Edelsteine zu installieren, können Sie einfach einen einzigen Befehl ausführen:
(sudo) gem installieren haml chriseppstein-kompass
Solange es sagt, dass es beide Edelsteine erfolgreich installiert hat, sind Sie gut zu gehen!
Wenn Sie mit einem Ruby-basierten Projekt arbeiten, lesen Sie in der Dokumentation nach, wie das Projekt mit Ihrem spezifischen Framework funktioniert. Ich gehe jedoch davon aus, dass wir mit einem einfachen HTML- oder ähnlichen Projekt arbeiten.
Der Befehl compass bietet viele Optionen. Wenn Sie compass --help ausführen, sehen Sie möglicherweise Folgendes:
Zu Ihrer Information: In der nebenstehenden Zeile steht "Loading haml-edge gem". Ich verwende die neueste Version. Sie brauchen sich also keine Sorgen zu machen, wenn Ihre etwas anderes sagt.
Jetzt beginnen wir unser Compass-Projekt. Um zu erstellen, führen Sie den folgenden Befehl aus (einschließlich des nachlaufenden Zeitraums, der dem Kompass mitteilt, wo wir unser Projekt machen wollen!)
Kompass --sass-dir = sass .
Und du solltest sehen:
Bei der Initialisierung hatte Compass normalerweise standardmäßig den Sass in einem Ordnernamen src, aber ich wollte das ändern und fügte die Option hinzu. Wenn Sie sich den Ordner ansehen, sollten Sie eine Datei namens config.rb und zwei weitere Ordner sehen.
Die config.rb ist die Konfiguration, die Compass betrachtet, aber die meiste Zeit müssen Sie sich nicht damit abfinden. Wie aus der Ausgabe des Erstellungsbefehls hervorgeht, haben wir drei Möglichkeiten, unser CSS von unserem Sass zu aktualisieren:
Accentsconagua
Kompass - Wenn Sie diese Option verwenden, müssten Sie sich im richtigen Verzeichnis befinden. Compass würde dann Ihr Sass einmal kompilieren.Kompass -u Pfad / zu / Projekt - Dies ist in etwa derselbe Befehl wie oben, aber Sie müssen sich nicht im Projektverzeichnis befinden, sondern mit dem Befehl übergeben.compass --watch [Pfad / zu / Projekt] - Dieser Befehl ist ziemlich beeindruckend, da er auf Änderungen an Ihren Sass-Dateien achtet und sie automatisch neu kompiliert, sobald eine Änderung erkannt wird.Nun, da Sie wissen, wie Sie ein Projekt einrichten, werde ich einige "Regeln" für die Arbeit mit Sass erläutern
Normalerweise würden Sie beim Schreiben von CSS Folgendes schreiben:
#header width: 900px; Hintergrund: # 111; #header a color: # 000; Textdekoration: keine;
Ein Problem dabei ist, dass Sie denselben Namen mehrmals wiederholen. Lass uns das zu Sass machen. Ich werde in der Datei screen.sass arbeiten, löschen Sie also alles und Ihr Sass möchte:
#header: Breite 900px: Hintergrund # 111 a: Farbe # 000: Textdekoration keine
Persönlich, dass es viel einfacher ist, auf diese Weise zu lesen und zu schreiben, keine geschweiften Klammern oder Semikolons. Die Art, wie Sass die Verschachtelung versteht, ist die Einrückung.
Der erste Selektor ist überhaupt nicht eingerückt, also das letzte CSS mit dem Start. Außerdem beginnen alle Eigenschaften (also Farbe, Höhe, Breite usw.) mit einem Doppelpunkt. Für die Eigenschaften von #header werden sie eingerückt. Es spielt keine Rolle, ob Sie Tabulatoren oder Leerzeichen verwenden, aber Sie müssen konsistent bleiben, andernfalls wird ein Fehler angezeigt (den ich in einer Minute anzeigen werde)..
Nun, da Sie Ihre Eigenschaften haben, haben wir unseren nächsten Selektor. Da dies den Eigenschaften gleichgestellt ist, wird die CSS-Ausgabe angezeigt #header a…
Nun, da wir so weit sind, versuchen wir es zu kompilieren: (in Ihrem Projektverzeichnis)
Kompass
Und voila!
Nehmen wir an, Sie haben nicht alles gleich eingerückt, Compass würde einen Fehler machen:
Wenn Sie nun CSS kennen, wird Sass nicht unbedingt eine Lernkurve sein, da der Hauptunterschied beim Einstieg in den unterschiedlichen Formatierungsregeln liegt. Als Nächstes werden wir mit einigen der fortgeschritteneren (aber cooleren) Teile von Sass arbeiten.
Eine großartige Funktion von Sass ist die Möglichkeit, Variablen zu verwenden. Ein Beispiel:
!link_color = #fff #header: Breite 900px: Hintergrund # 111 a: color =! link_color: Textdekoration none
Wenn Sie dies zusammenstellen, erhalten Sie:
Vielleicht lachen Sie über diesen Titel, aber es stimmt, Sie können mit Sass rechnen! Für diese Demonstration verwenden wir den interaktiven Modus von Sass. Führen Sie also Folgendes aus:
sass -i
Und ein bisschen Durcheinander würde Ihnen geben:
Oder eine visuellere Herangehensweise:
# 111 - # 999 = # 000
# 111 + # 999 = #aaa
# 398191 + # 111 = # 4a92a2
# 398191 - # 111 = # 287080
Neben Addition und Subtraktion können Sie auch multiplizieren und dividieren:
# 398191/2 = # 1c4048
# 398191 * 2 = # 72ffff
Um den interaktiven Sass-Modus zu beenden, drücken Sie die Tastenkombination "Control-C" und geben Sie "end" ein.
Wenn Sie jemals gehört haben, dass Ihr Code TROCKEN bleibt, bedeutet TROCKEN "sich nicht wiederholen". Mit Mixins können Sie genau das tun. Mit der zunehmenden Beliebtheit abgerundeter Ecken möchten Sie beispielsweise ein Mixin erstellen, um damit umzugehen. Sie würden also irgendwo (nicht unter einem Selektor) Folgendes hinzufügen:
= gerundet: Randradius 4px: -moz-Randradius 4px: -webkit-Randradius 4px
Und zu benutzen, würden Sie so etwas tun:
#header: width 900px: background # 111 + gerundet
Und wenn kompiliert:
Nehmen wir an, Sie möchten vielleicht, dass der Randradius variabel ist. Nun, Sie können erwarten, dass ein Mix einige Werte übergibt. Ändern Sie unser Mixin, würde es so aussehen:
= gerundet (! radius = 4px): border-radius =! radius: -moz-border-radius =! radius: -webkit-border-radius =! radius
Und dann könnten Sie verwenden, was wir zuvor gemacht haben, und dann würde der Wert standardmäßig 4px sein, ansonsten:
#header: width 900px: Hintergrund # 111 + gerundet (8px)
Sass hat auch die Möglichkeit, andere Sass-Dateien zu importieren. Nehmen wir also an, Sie wollten eine Datei importieren (in derselben Sass-Datei), würden Sie Folgendes hinzufügen:
@import reset.sass
Diese Funktion bietet Ihnen die Möglichkeit, fremde Stile außerhalb Ihrer Hauptdatei zu behalten. Zum Beispiel könnten Sie auch eine Mixins-Sass-Datei behalten, die Sie in Projekte kopiert haben, und dann würde ein einfacher Import diesen Code hinzufügen - kein Kopieren und Einfügen.
Ich hoffe, Sie verstehen die Grundlagen der Verwendung von Sass und Compass und werden sie möglicherweise in Ihrem nächsten Projekt verwenden! Wenn Sie jetzt so sind wie ich, als ich Sass fand und sagte: "Ich brauche das nicht!", Probieren Sie es aus. Ich habe bei allen meinen letzten Projekten zu ihm gewechselt und ich arbeite sehr gerne damit.
Hier sind ein paar Links, die Ihnen auf dem Weg helfen können:
