So verwenden Sie den CSS-Präprozessor

Der Präprozessor wurde beim Erstellen des Projekts nicht ausgewählt und der entsprechende Loader muss manuell installiert werden. Die Methoden sind: 1. Sass, „Sass-Loader Node-Sass“; 2. Less, „Less-Loader Less“; 3. Stylus, „Stylus-Loader Stylus“.

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.

CSS-Präprozessor

1. Was ist ein CSS-Präprozessor? Der CSS-Präprozessor ist eine spezielle Programmiersprache, die zum Hinzufügen einiger Programmierfunktionen zu CSS verwendet wird (CSS selbst ist keine Programmiersprache).

Es besteht keine Notwendigkeit, sich mit Browserkompatibilitätsproblemen zu befassen, da der CSS-Präprozessor letztendlich Standard-CSS-Stile kompiliert und ausgibt.

Sie können grundlegende Programmierkenntnisse wie Variablen, einfache logische Urteile und Funktionen im CSS-Präprozessor verwenden.

2. Mehrere häufig verwendete CSS-Präprozessoren

sass
less
Stylus
3. So verwenden Sie den CSS-Präprozessor

Wenn Sie beim Erstellen nicht den von Ihnen benötigten auswählen die Projekt-Präprozessor (Sass/Less/Stylus), Sie müssen den entsprechenden Loader manuell installieren Stile importieren

Um Stildateien (für Farben, Variablen, Mixins usw.) automatisch zu importieren, können Sie den Style-Resources-Loader verwenden.

npm install -D sass-loader node-sass

Konfiguration

npm install -D less-loader less

Empfohlenes Lernen:

CSS-Video-Tutorial

Das obige ist der detaillierte Inhalt vonSo verwenden Sie den CSS-Präprozessor. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!