CSS-Dateien in LESS-Dateien importieren

In LESS ist das Importieren externer Stylesheets eine nützliche Funktion zum Organisieren und Verwalten Ihres Codes. Es ist jedoch wichtig, die spezifischen Anforderungen beim Importieren verschiedener Dateitypen zu verstehen.

Importieren von .css-Dateien

Anders als beim Importieren anderer LESS-Dateien erfordert das Importieren einer .css-Datei in eine LESS-Datei eine besondere Überlegung . Die einfache Verwendung der @import-Direktive wie üblich wird nicht funktionieren.

Syntax für den Import von .css-Dateien

Um eine .css-Datei in eine LESS-Datei zu importieren, müssen Sie die folgende Syntax verwenden:

@import (css) "path/to/style.css";

Durch Angabe der Mit der Option (css) weisen Sie den LESS-Compiler explizit an, die importierte Datei als CSS-Datei zu behandeln. Dadurch wird sichergestellt, dass die CSS-Stile in der CSS-Datei in Ihrer LESS-Datei enthalten sind.

Beispiel

Bedenken Sie den folgenden Code:

@import (css) "../style.css";

.small {
  font-size: 60%;
  .type;
}

In diesem Beispiel importiert die LESS-Datei die Datei ../style.css, die eine Klasse namens .type enthält. Durch Angabe der Option (css) erkennt der LESS-Compiler die importierte Datei als CSS-Datei und macht die Klasse .type in Ihrer LESS-Datei zugänglich.

Durch Befolgen dieser spezifischen Syntax können Sie erfolgreich importieren und verwenden CSS-Dateien in Ihrem LESS-Code, sodass Sie die Funktionalität beider Frameworks kombinieren können.