WENIGER - Richtlinien importieren

Beschreibung

Das @importDie Direktive wird verwendet, um die Dateien in den Code zu importieren. Es verteilt den WENIGER Code auf verschiedene Dateien und ermöglicht es, die Struktur des Codes einfach beizubehalten. Sie können die @ import- Anweisungen an einer beliebigen Stelle im Code einfügen.

Sie können die Datei beispielsweise mithilfe von importieren @importSchlüsselwort als @import "Dateiname.less" .

Dateierweiterungen

Sie können die @ import- Anweisungen abhängig von den verschiedenen Dateierweiterungen verwenden, z.

Wenn Sie mit CSS - Erweiterung, dann wird es als CSS und die berücksichtigt werden @import Aussage bleibt wie es ist.
Wenn es eine andere Erweiterung enthält, wird es als WENIGER betrachtet und importiert.
Wenn es keine WENIGER-Erweiterung gibt, wird sie als importierte WENIGER-Datei angehängt und eingefügt.

@import "style";      // imports the style.less
@import "style.less"; // imports the style.less
@import "style.php";  // imports the style.php as a less file
@import "style.css";  // it will kept the statement as it is

Beispiel

Das folgende Beispiel zeigt die Verwendung von Variablen in der SCSS-Datei -

<!doctype html>
   <head>
      <title>Import Directives</title>
      <link rel = "stylesheet" href = "style.css" type = "text/css" />
   </head>

   <body>
      <h2>Example of Import Directives</h2>
      <p class = "myline">Welcome to Tutorialspoint...</p>
   </body>
</html>

Erstellen Sie als Nächstes die Datei import_dir.less .

import_dir.less

.myline {
   font-size: 20px;
}

Erstellen Sie nun die Datei style.less .

style.less

@import "http://www.tutorialspoint.com/less/import_dir.less";
.myline {
   color:#FF0000;
}

Die Datei import_dir.less wird vom Pfad in die Datei style.less importierthttps://www.tutorialspoint.com/less/import_dir.less.

Sie können style.less zu style.css kompilieren , indem Sie den folgenden Befehl verwenden:

lessc style.less style.css

Führen Sie den obigen Befehl aus. es wird die erstellen style.css Datei automatisch mit dem folgenden Code -

style.css

.myline {
   font-size: 20px;
}

.myline {
   color: #FF0000;
}

Ausgabe

Befolgen Sie diese Schritte, um zu sehen, wie der obige Code funktioniert -

Speichern Sie den obigen HTML-Code in der import_directives.html Datei.
Öffnen Sie diese HTML-Datei in einem Browser. Die folgende Ausgabe wird angezeigt.