Erste Schritte mit Sass – Erlernen der Grundlagen und seiner Installation

Vielleicht haben Sie bereits von Sass (Syntactically Awesome StyleSheets) gehört und sind daran interessiert, haben aber keine Ahnung, wie Sie es einrichten oder in Ihr Projekt integrieren können. In seiner einfachsten Form ist Sass als CCS-Prozessor bekannt, der es ermöglicht, das CCS-Schreiben effizienter und schneller zu gestalten. Wir werden die Grundlagen und Installationen von Sass für Mac und Windows besprechen.

Das grundlegende Wissen über Sass

Es gibt einige Lernkurven, wenn es um die Verwendung und Einrichtung von Sass geht. Damit Sie mit dem Sass-Projekt vorankommen können, müssen Sie zumindest über Grundkenntnisse in HTML und CSS verfügen. Sie müssen mit CSS vertraut oder kompetent sein, bevor Sie versuchen, den CSS-Prozessor Sass zu erlernen.

Wenn Sie jemals die Farben in Ihrem Stylesheet viel Zeit geändert haben oder sich eine bessere Möglichkeit gewünscht haben, Ihr Stylesheet bereits mit den Herstellerpräfixen versehen war oder Ihnen aufgefallen ist, dass Ihre Stylesheets länger und schwer zu warten sind, dann liegen das vielleicht daran reichten aus, um das Studium von Sass auszuprobieren. Ich werde einige der Begriffe zusammenfassen, damit Sie die Grundlagen von Sass verstehen können.

• Variable – Es ist ein Speichercontainer für CSS-Werte wie Zahlen und Farben. Die Syntax wurde als „$variable“ geschrieben. Dieser Code kann im gesamten Stylesheet verwendet werden, nachdem Sie ihn definiert haben.
• Verschachtelung – Es reduziert die Wiederholungen im Code und kann das Schreiben von CSS einfacher und schneller machen.
• Teiltöne – Dies sind die CSS-Dateien, die mit dem Unterstrich „_partial.scss“ beginnen und nicht in eigene CSS-Dateien kompiliert, sondern in die Hauptdatei importiert werden.
• Importieren – Verwenden Sie „@import“, um alle Teiltöne in einer einzigen Datei zusammenzustellen.
• Mixins – Verwenden Sie „@mixin“ für das sich wiederholende CSS, beispielsweise wenn die Herstellerpräfixe erforderlich waren.
• Verlängern – Verwenden Sie „@extend“, um einige Aspekte des Schlüssels ansonsten von Elementen derselben Identität zu ändern, beispielsweise einer Gruppe von Schaltflächen mit unterschiedlichen Farben.
• Betreiber – Dadurch kann der Benutzer mathematische Berechnungen im CSS verwenden, z. B. die Breite verschiedener Teile des Layouts definieren.

Sass auf Mac und Windows installieren

Sass läuft auf der Programmiersprache Ruby, daher muss Ruby auf Ihrem Computer installiert sein. Für Mac-Benutzer ist Ruby auf dem OSX bereits vorinstalliert. Überprüfen Sie, ob Sie eine aktualisierte Version verwenden, indem Sie „ruby – v“ eingeben. Wenn die Zahl niedriger als 2.0.0 ist, geben Sie zum Aktualisieren „do gem install ruby“ ein. Jetzt können Sie mit der Installation von Sass beginnen.

Allerdings ist die Installation unter Windows etwas kniffliger, da dort kein Ruby installiert ist. Wenn Sie eine 64-Bit-Version von Windows 7 ausführen, wählen Sie Ruby 2.1.7 (x54). Das Gleiche muss auch für Windows 8 und 10 durchgeführt werden. Stellen Sie sicher, dass Sie „Ruby-ausführbare Datei zu Ihrem PATH hinzufügen“ auswählen und dann fortfahren. Sobald Ruby installiert ist, öffnen Sie die Eingabeaufforderung und bestätigen Sie, dass Ruby installiert wurde. Dann können Sie Sass installieren, indem Sie „gem sass installieren” und schon sind Sie fertig.

SchienenCarma hat von Anfang an am Ruby on Rails-Framework gearbeitet und über 250 RoR-Projekte abgewickelt. Schauen Sie sich unsere an Portfolio um zu verstehen, wie wir durch unsere Bereitstellung dazu beitragen, die Form der Softwareindustrie zu verändern Ruby on Rails-Entwickler. Nehmen Sie jetzt Kontakt mit uns auf!