So verwenden Sie den CSS-Präprozessor-CSS-Tutorial-php.cn

So verwenden Sie den CSS-Präprozessor

不言

Freigeben： 2018-11-28 09:08:46

Original

4112 Leute haben es durchsucht

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.

Obwohl es verschiedene Sass und Less gibt, scheint es bisher immer noch schwierig zu sein, es in CSS zu beschreiben, aber es wird „neue erweiterte CSS-Version“ genannt.

Hauptpräprozessortypen

Sass

Sass 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.

LESS

LESS 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 schreibt

HTML

<h1>hello,php中文网！</h1>
<h2>hello,php中文网！</h2>

Nach dem Login kopieren

WENIGER

@mycolor: blue;
h1 {
    font-size: 30px;
    font-color: @mycolor;
}
h2 {
    font-size: 20px;
    font-color: @mycolor;
}

Nach dem Login kopieren

Der Browser-Anzeigeeffekt ist wie folgt:

So verwenden Sie den CSS-Präprozessor

HTML

<h1>hello,php中文网！</h1>
<h2>hello,php中文网！</h2>

Nach dem Login kopieren

style.css-Datei

h1 {
    font-size: 30px;
    font-color: blue;
}
h2 {
    font-size: 20px;
    font-color: blue;
}

Nach dem Login kopieren

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;
}

Nach dem Login kopieren

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!