Erste Schritte mit der Sass-Installation und den Grundlagen

In diesem Beitrag diskutieren wir einen CSS-Präprozessor namens Sass oder Syntaktisch fantastische Stylesheets.

Wenn Sie unsere vorherigen Beiträge zu LESS verfolgt haben, sind wir sicher, dass Sie mit der CSS-Präprozessor. Sowohl Sass als auch LESS sind CSS-Präprozessoren, die in erster Linie die Art und Weise erweitern, in der wir plain-static-CSS auf dynamischere Weise mit Programmiersprachen wie Variablen, Mixins und Funktionen erstellen.

Sass installieren

Bevor wir Sass komponieren können, müssen wir es installieren. Sass baut auf Ruby auf. Wenn Sie an einem Mac arbeiten, ist die Wahrscheinlichkeit groß, dass Sie Ruby bereits installiert haben. Wenn Sie Ruby unter Windows installieren möchten, verwenden Sie diesen Ruby-Installer.

Nachdem die Installation abgeschlossen ist, können Sie zum Terminal (auf einem Mac) oder in der Eingabeaufforderung (unter Windows) wechseln und dann die folgende Befehlszeile eingeben:

Auf dem Mac;

 sudo gem install sass

Unter Windows;

 gem install sass

Wenn die Installation erfolgreich ist, erhalten Sie die folgende Benachrichtigung in Ihrer Terminal- / Eingabeaufforderung.

Als Nächstes müssen wir das Verzeichnis auswählen, das Sass überwachen soll. Verwenden Sie dazu den folgenden Befehl.

 sass --watchpfad / sass-verzeichnis

Die obige Befehlszeile überwacht jeden .scss/.sass Dateien in Pfad / Verzeichnis Immer wenn eine der Dateien in diesem Verzeichnis geändert wird, aktualisiert Sass die entsprechenden Dateien oder erstellt eine, falls keine existiert.

Wenn wir Sass benötigen, um die Dateien in einem bestimmten Verzeichnis zu generieren, können wir dies auf diese Weise tun.

 sass --watchpfad / sass-verzeichnis: pfad / css-verzeichnis

Mit dieser Befehlszeile können wir auch eine bestimmte Datei anstelle des Verzeichnisses überwachen.

 sass --watch path / sass-verzeichnis / styles.css

Wenn der Watch-Befehl erfolgreich ist, wird in der Terminal- / Eingabeaufforderung eine Meldung wie die folgende angezeigt.

Lesen Sie weiter: Automatisches Kompilieren von Sass-Dateien mit Sass 3

Sass-Anwendungen

Wenn Sie jedoch keine Terminal- oder Eingabeaufforderung verwenden, können Sie einige Anwendungen für Sass verwenden. Die kostenlose Option ist Scout; es basiert auf Adobe Air und kann daher auf allen Betriebssystemen (Windows, OSX und Linux) ausgeführt werden.

Es läuft jedoch sehr langsam, wie einige zuvor berichtet haben.

Wenn Sie nicht die Geduld haben, gibt es auch einige kostenpflichtige Optionen. Der Preis variiert für jede App, Compass.app gilt für 10 $, Fire.app, 14 $ und Codekit für 25 $.

Code-Hervorhebung

Obwohl Sass hauptsächlich eine CSS-Erweiterung ist, hebt der aktuelle Editor die Syntax möglicherweise nicht richtig hervor. Glücklicherweise gibt es bereits einige Pakete, die für fast jeden Code-Editor aktiviert werden können .sass oder .scss Code-Hervorhebung.

Wenn Sie wie ich mit Sublime Text 2 arbeiten, können Sie diese Pakete verwenden. Sublime Text HAML & Sass und Sublime Text 2 Sass Package. Zur Vereinfachung können Sie eines dieser Pakete über Package Control installieren.

Für andere Code-Editoren siehe unten oder probieren Sie Googling.

Dies ist ein großartiges Screencast-Tutorial zum Arbeiten mit Dreamweaver für Sass
Sass-Modus für Coda. Es scheint jedoch, dass dieser Modus ab Version 2 in Coda integriert wurde
TextMate Offizielles SCSS-Bundle
Espresso-Zucker für Sass
InType-Bundles

Sass Sprache

Sass und LESS haben tatsächlich einige gemeinsame Sprachen, darunter einige.

Variablen

 $ color-base: # 000; $ width: 100px;

Der einzige Unterschied zu LESS-Variablen besteht darin, dass die Variable in Sass mit a definiert wird $ Zeichen.

Verschachtelungsregeln

 Header Breite: 980px; Höhe: 80px; nav ul list-style: none; Polsterung: keine; Marge: keine;  li Anzeige: Inline; eine Textdekoration: keine;

Mixins und Funktionen

 @mixin border-radius ($ radius) -moz-border-radius: $ radius; -webkit-border-radius: $ radius; -ms-border-radius: $ radius; Grenzradius: $ Radius;

Operationen

 li width: $ width / 5 - 10px;

Bedingte Erklärung

 @w Leichtigkeit ($ color-base)> = 51% Hintergrundfarbe: # 333333;  @else Hintergrundfarbe: #ffffff;

In LESS können Sie ein ähnliches Vorgehen über den Guard-Ausdruck machen, über den wir in diesem Tutorial berichtet haben.

Letzter Gedanke

Und das ist es. Im nächsten Beitrag werden wir die Sass-Sprachen und ihren Begleiter Compass erkunden. Bleib dran.