Heim >Web-Frontend >CSS-Tutorial >So verwenden Sie den CSS-Präprozessor
Manchmal kann es in CSS zu Codekonflikten kommen und Variablen, arithmetische Berechnungen usw. können nicht ausgeführt werden. Mithilfe des CSS-Präprozessors können Sie Programme wie Proximity-Variablen und Vier-Regel-Berechnungen schreiben. Daher erfahren Sie im folgenden Artikel, wie Sie den CSS-Präprozessor verwenden.
Werfen wir zunächst einen Blick daraufWas ist ein CSS-Präprozessor?
Das Standard-CSS ist bisher eine unmögliche Beschreibung. Der CSS-Präprozessor soll die CSS-Sache effektiv beschreiben. CSS-Präprozessoren können jedoch nicht in Browsern verwendet werden.Hauptpräprozessortypen
SassSass ist eine CSS-Datei, die scsss konvertiert, und die Erweiterung ist „.scss“, wobei Variablen und Formeln hinzugefügt werden zu CSS-Programmierstilen. Sie können „style.css“ erstellen, indem Sie die Sass-Datei „style.scss“ konvertieren (kompilieren). Um es zu verwenden, müssen Sie Ruby installieren. LESSLESS konvertiert (kompiliert) WENIGER Dateien wie Sass. Das Konzept einer Variablen kann kleiner sein, sodass Sie sie berechnen oder hierarchisch schreiben können. Wenn jedoch node.js nicht für die Verwendung von „style.less“ installiert ist, wird „style.css“ nicht konvertiert.Schauen wir uns ein konkretes Beispiel an
Wie man WENIGER schreibtHTML<h1>hello,php中文网!</h1> <h2>hello,php中文网!</h2>WENIGER
@mycolor: blue; h1 { font-size: 30px; font-color: @mycolor; } h2 { font-size: 20px; font-color: @mycolor; }Der Browser-Anzeigeeffekt ist wie folgt: HTML
<h1>hello,php中文网!</h1> <h2>hello,php中文网!</h2>style.css-Datei
h1 { font-size: 30px; font-color: blue; } h2 { font-size: 20px; font-color: blue; }In diesem Fall, wenn Sie die Farbe ändern möchten, wenn alle Farben geändert werden sollen, wenn Sie 2 h1h2 ändern möchten, verwenden Sie Variablen, um sie wie folgt zu beschreiben.
@mycolor: blue; h1 { font-size: 30px; font-color: @mycolor; } h2 { font-size: 20px; font-color: @mycolor; }
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!