Was bedeutet weniger in CSS?

Less ist in CSS eine Vorverarbeitungssprache, die die CSS-Sprache erweitert, um die Wartung und Erweiterung von CSS zu erleichtern. Less ist außerdem ein Präprozessor, der anpassbare, verwaltbare und wiederverwendbare Stile für Website-Tabellen ermöglicht, sodass diese über einen Webbrowser gelesen werden können .

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

Was bedeutet weniger in CSS?

Less ist eine CSS-Vorverarbeitungssprache und fügt Variablen, Mixin, Funktionen und andere Funktionen hinzu, um die Wartung und Erweiterung von CSS zu erleichtern.

LESS ist ein CSS-Präprozessor, der anpassbare, verwaltbare und wiederverwendbare Stylesheets für Websites ermöglicht. LESS ist eine dynamische Stylesheet-Sprache, die die Fähigkeiten von CSS erweitert. LESS ist außerdem browserübergreifend kompatibel.

Ein CSS-Präprozessor ist eine Skriptsprache, die CSS erweitert und in die reguläre CSS-Syntax kompiliert, sodass es von einem Webbrowser gelesen werden kann. Es bietet Funktionen wie Variablen, Funktionen, Mixins und Aktionen zum Erstellen dynamischen CSS.

Less ermöglicht es uns, Variablen zu definieren, verschachtelte Deklarationen zu verwenden, Funktionen zu definieren usw. Streng genommen besteht Less aus zwei Teilen: (1) Less-Syntax und (2) Less-Präprozessor. Schließlich verstehen Browser nur CSS, daher müssen Less-Dateien über den Less-Präprozessor in CSS kompiliert werden.

Das Beispiel sieht wie folgt aus:

@base: #f938ab;
.box-shadow(@style, @c) when (iscolor(@c)) {
  -webkit-box-shadow: @style @c;
  box-shadow:         @style @c;
}
.box-shadow(@style, @alpha: 50%) when (isnumber(@alpha)) {
  .box-shadow(@style, rgba(0, 0, 0, @alpha));
}
.box {
  color: saturate(@base, 5%);
  border-color: lighten(@base, 30%);
  div { .box-shadow(0 0 5px, 30%) }
}

Die Ausgabe als CSS-Code lautet wie folgt:

.box {
  color: #fe33ac;
  border-color: #fdcdea;
}
.box div {
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

(Lernvideo-Sharing: CSS-Video-Tutorial)

Das obige ist der detaillierte Inhalt vonWas bedeutet weniger in CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!