Sass - Installation
In diesem Kapitel erfahren Sie Schritt für Schritt, wie Ruby installiert wird, das zum Ausführen der SASS-Dateien verwendet wird.
Systemanforderungen für SASS
Operating System - Plattformübergreifend
Browser Support - IE (Internet Explorer 8+), Firefox, Google Chrome, Safari, Opera
Programming Language - Ruby
Installation von Ruby
Step 1 - Öffnen Sie den Link https://www.ruby-lang.org/en/downloads/sehen Sie einen Bildschirm wie unten gezeigt -
Laden Sie die aktuelle stabile Version der Zip-Datei herunter .
Step 2 - Führen Sie als Nächstes das zu installierende Setup aus Ruby auf dem System.
Step 3- Als nächstes Ruby - bin - Ordner zu Ihrem hinzufügen PATH Benutzervariable und Systemvariable zur Arbeit mit Edelstein - Befehl.
Path User Variable - -
Klicken Sie mit der rechten Maustaste auf My Computer Symbol.
Wählen Properties.
Klicken Sie anschließend auf Advanced Tab und klicken Environment Variables.
Im Umgebungsvariablen Fenster klicken Sie auf die doppelte PATH wie im Screenshot unten gezeigt -
Sie erhalten das Feld Benutzervariable bearbeiten wie gezeigt. Fügen Sie den Pfad des Ruby Bin-Ordners im Feld Variablenwert als hinzuC:\Ruby\bin. Wenn der Pfad für andere Dateien bereits festgelegt ist, setzen Sie danach ein Semikolon und fügen Sie den Ruby-Ordnerpfad wie unten gezeigt hinzu.
Drücke den OK Taste.
System Variable - -
Drücke den New Taste.
Als nächstes die New System Variable Block wird wie unten gezeigt angezeigt.
Eingeben RubyOptim Feld Variablenname undrubygemsim Feld Variablenwert . Nach dem Schreiben von Variablennamen und Wert , klicken Sie auf dieOK Taste.
Step 4 - Öffnen Sie die Eingabeaufforderung in Ihrem System und geben Sie die folgende Zeile ein -
gem install sass
Step 5 - Nach der erfolgreichen Installation von SASS wird der folgende Bildschirm angezeigt.
Beispiel
Das Folgende ist ein einfaches Beispiel für SASS.
<html>
<head>
<title> Import example of sass</title>
<link rel = "stylesheet" type = "text/css" href = "style.css"/>
</head>
<body>
<h1>Simple Example</h1>
<h3>Welcome to TutorialsPoint</h3>
</body>
</html>
Jetzt erstellen wir eine Datei als style.scss , die CSS sehr ähnlich ist. Der einzige Unterschied besteht darin, dass sie mit der Erweiterung .scss gespeichert wird. Sowohl .htm- als auch .scss-Dateien sollten im Ordner erstellt werdenruby. Sie können Ihre .scss-Datei im Ordner speichernruby\lib\sass\ (Erstellen Sie vor diesem Vorgang einen Ordner als sass im lib-Verzeichnis).
h1{
color: #AF80ED;
}
h3{
color: #DE5E85;
}
Mit dem folgenden Befehl können Sie SASS anweisen, die Datei zu überwachen und das CSS zu aktualisieren, wenn sich die SASS-Datei ändert.
sass --watch C:\ruby\lib\sass\style.scss:style.css
Wenn Sie den obigen Befehl ausführen, wird die Datei style.css automatisch erstellt. Wenn Sie die SCSS-Datei ändern, wird die Datei style.css automatisch aktualisiert.
Die Datei style.css enthält den folgenden Code, wenn Sie den oben angegebenen Befehl ausführen:
style.css
h1 {
color: #AF80ED;
}
h3 {
color: #DE5E85;
}
Lassen Sie uns die folgenden Schritte ausführen, um zu sehen, wie der oben angegebene Code funktioniert:
Speichern Sie den oben angegebenen Code in hello.html Datei.
Öffnen Sie diese HTML-Datei in einem Browser.