LESS-インポートディレクティブ

説明

ザ・ @importディレクティブは、コード内のファイルをインポートするために使用されます。LESSコードをさまざまなファイルに分散し、コードの構造を簡単に維持できるようにします。@importステートメントはコードのどこにでも置くことができます。

たとえば、を使用してファイルをインポートできます @importキーワードとして@import "file_name.less"。

ファイル拡張子

−などのさまざまなファイル拡張子に応じて@importステートメントを使用できます。

.css拡張子を使用している場合、それはCSSと見なされ、@ importステートメントはそのまま残ります。
他の拡張子が含まれている場合は、LESSと見なされ、インポートされます。
LESS拡張子がない場合は、インポートされたLESSファイルとして追加および含まれます。

@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

例

次の例は、SCSSファイルでの変数の使用を示しています-

<!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>

次に、import_dir.lessファイルを作成します。

import_dir.less

.myline {
   font-size: 20px;
}

次に、style.lessファイルを作成します。

style.less

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

import_dir.lessのファイルがにインポートされますstyle.lessパスからファイルhttps://www.tutorialspoint.com/less/import_dir.less。

次のコマンドを使用して、style.lessをstyle.cssにコンパイルできます。

lessc style.less style.css

上記のコマンドを実行します。次のコードでstyle.cssファイルを自動的に作成します-

style.css

.myline {
   font-size: 20px;
}

.myline {
   color: #FF0000;
}

出力

上記のコードがどのように機能するかを確認するには、次の手順に従ってください-

上記のhtmlコードをに保存します import_directives.html ファイル。
このHTMLファイルをブラウザで開くと、次の出力が表示されます。