Share
Sass ist eine großartige Möglichkeit, die Front-End-Entwicklung im Allgemeinen zu beschleunigen. Ich verwende es in jedem meiner Projekte. Sass (wie alle anderen Präprozessoren) ermöglicht verschachtelte Stile, Funktionen und vorgeschriebenen Code in sogenannten Mixins. Foundation hat ein paar verschiedene Versionen, momentan haben wir uns mit den gängigsten HTML / CSS-Varianten befasst, aber nun wollen wir über eine auf Sass basierende Version sprechen.
Das Team hinter Foundation hat Sass nicht nur verwendet, um ein freundlicheres und dynamischeres Styling zu ermöglichen, sondern bietet auch mehr Anpassungsmöglichkeiten in der Sass-Version als in der HTML / CSS-Version.
Sass ist großartig für diejenigen von Ihnen, die wie ich die ersten Designer und die Codierer die zweiten sind. HTML und CSS sind leicht zu erlernen und erledigen die Arbeit, aber es ist ein großer Sprung von diesen einfachen Sprachen zu jQuery und JavaScript. Mit Sass können Sie mit der Idee von Funktionen, Variablen und wiederverwendbarem Code flirten, was wirklich beim Übergang zu komplexeren Sprachen hilft.
Wir werden gleich hier eintauchen, und dazu müssen wir eine Terminal- / Eingabeaufforderung verwenden, aber lassen Sie sich nicht abschrecken, da es einfacher ist, als es aussieht. Öffne Terminal (OS X) und füge Folgendes ein:
sudo gem installieren zurb-foundation
Die Verarbeitung kann einige Zeit dauern, sollte jedoch zu einem Bildschirm wie dem folgenden führen:
Nachdem Sie diesen Schritt abgeschlossen haben, haben Sie im Wesentlichen den Foundation Core zu Ihrem System hinzugefügt, sodass Sie ihn nach Belieben wiederverwenden können, ohne zur Foundation-Site gehen zu müssen. Bei diesem Ansatz können Sie mit einem anderen einfachen Befehl dieses wiederverwendbare Kernframework auf den neuesten öffentlichen Build- oder Release-Kandidaten aktualisieren. Fügen Sie dazu einfach eines der folgenden Elemente in das Terminal ein:
sudo gem update zurb-foundation
sudo gem installieren zurb-foundation --pre
Der letzte Schritt des Setups ist die Installation von Compass, mit der wir Foundation-Builds für unsere Projekte erstellen können. Dies kann wiederum einige Zeit in Anspruch nehmen. Fügen Sie Folgendes ein:
Sudo-Edelstein installieren Kompass
Nach der Installation sollten Sie eine Terminal-Ausgabe haben, die folgendermaßen aussieht:
Nun, da wir die Wendungen und Wendungen durch die Installation eines Rubin-Edelsteins durchlaufen haben und ihn auf dem neuesten Stand halten, können wir ein Projekt aufbauen, damit wir diesen Entwicklungsweg mit Foundation analysieren können.
Wenn Sie ein neues Projekt starten möchten, öffnen Sie einfach das Terminal und geben "cd" (Verzeichnis wechseln) ohne die Sprachmarkierungen ein. Dann müssen Sie entweder einen Pfad eingeben oder einen Ordner für Ihr Projekt erstellen und ihn hineinziehen zum Terminal. Stellen Sie jedoch sicher, dass zwischen "cd" und Ihrem Pfad ein Leerzeichen steht. Folgen Sie diesem Befehl mit einem Befehl, der Ihr Projekt tatsächlich erstellt:
compass create YOUR-PROJECT-NAME -r zurb-foundation - using foundation
Stellen Sie sicher, dass Sie den Text "YOUR-PROJECT-NAME" für Ihren tatsächlichen Projektnamen ändern und die Eingabetaste drücken. Sie sehen dann viele Informationszeilen, die zu einer Auswahl führen. Diese Auswahl legt fest, ob Ihre Sass-Dateien beim Speichern in CSS-Dateien konvertiert werden oder beim Konvertieren manuell. Ich benutze immer die zweite Wahl, die beim Speichern meiner Sass-Dateien automatisch CSS-Dateien erstellt. Sie sollten so etwas sehen:
Sie sehen, dass viel passiert ist und Ihr Foundation-Projekt geboren ist. Wenn Sie Ihre Kompilierungsmethode mit der Methode "compass compile" oder "compass watch" ausgewählt haben, können Sie den Code verwenden, der unten im Bild angezeigt wird. Dadurch sparen Sie nur etwas Zeit, da Sie Ihr Ausgabe-Stylesheet hinzufügen und normalisieren.
Von hier aus können Sie mit Sass Ihr Projekt tatsächlich erstellen.
Wenn Sie Windows verwenden, können Sie immer noch die Sass-Version von Foundation verwenden. Es sind nur ein paar Schritte mehr erforderlich. Zuerst wollen wir Ruby packen. Mit Ruby können wir diese Sass-basierte Version von Foundation installieren. Im Gegensatz zu OS X ist dies bei Windows nicht standardmäßig installiert, daher müssen wir es abrufen.
Jetzt möchten Sie die neueste Version (2.0.0 zum Zeitpunkt des Schreibens) und je nach verwendeter Architektur wählen Sie entweder den Standard für 32-Bit-Computer oder x64 für 64-Bit-Computer. Wenn Sie sich nicht sicher sind, klicken Sie einfach mit der rechten Maustaste auf "Arbeitsplatz" und dann auf "Eigenschaften", um es herauszufinden. Andernfalls gehen Sie mit 32-Bit.
Führen Sie nach dem Herunterladen die Installation durch. Bitte kreuzen Sie nichts an, es sei denn, Sie wissen, was Sie tun. Gehen Sie nach Abschluss der Installation zu den Programmen, dann zu Ruby und klicken Sie auf "Eingabeaufforderung mit Ruby starten". Sobald dies geladen ist, kopieren Sie den folgenden Code und fügen Sie ihn in die Eingabeaufforderung ein, indem Sie mit der rechten Maustaste auf die obere Leiste klicken und "Bearbeiten"> "Einfügen" wählen.
gem installieren zurb-foundation
Sie werden etwas ähnliches sehen:
Sie können Foundation auch auf dem neuesten Stand halten, indem Sie entweder den Befehl general public build oder den Befehl release kandidieren:
gem update zurb-foundation
gem installieren zurb-foundation --pre
Nun, da wir die Grundlagen eingerichtet haben, installieren wir das letzte Stück Compass. Wie zuvor können wir Compass mit einem Befehl installieren:
gem installieren kompass
Seien Sie geduldig, dies führt zu einem Bildschirm wie diesem:
Um Ihr Projekt tatsächlich zu erstellen, müssen Sie in ein Verzeichnis wie "Desktop" wechseln und einen Befehl ausführen. Sie können dies tun, indem Sie "cd" ohne die Sprachmarkierungen eingeben, gefolgt von einem Leerzeichen, gefolgt von einem Pfad. Um den Pfad selbst hinzuzufügen, können Sie entweder einen eingeben oder den Ordner einfach in die Eingabeaufforderung ziehen und dort ablegen.
Wenn Sie das Verzeichnis geändert haben, führen Sie diesen Befehl aus und ändern Sie IHR-PROJEKT-NAME für Ihren tatsächlichen Projektnamen.
compass create YOUR-PROJECT-NAME -r zurb-foundation - using foundation
Und das ist es! Danach gibt es keine Unterschiede zwischen Windows und OS X.
Wenn Sie OS X verwenden, gibt es ein großartiges Entwicklungstool namens CodeKit. Diese Anwendung minimiert automatisch JS, CSS, SCSS und konvertiert SCSS in CSS, was bedeutet, dass Sie Terminal beenden und stattdessen CodeKit verwenden können. Es bietet auch Fehlerhervorhebung für JS und SCSS, einschließlich Bibliotheken wie jQuery.
Ich weiß was du denkst; "Ich habe kein OS X". Keine Sorge, ich habe Sie nicht vergessen, Windows-Leute. Sie können sich die nächstgelegene gleichwertige Anwendung namens Prepros holen.
Im nächsten Teil werden wir untersuchen, was Sie mit dieser dynamischeren Sass-basierten Version von Foundation tun können. Dazu gehören das Anpassen des Builds, das Ändern von Standardstilen und vieles mehr.
Accentsconagua