LESS-インストール

この章では、LESSのインストール方法を段階的に理解します。

LESSのシステム要件

  • Operating System −クロスプラットフォーム

  • Browser Support − IE(Internet Explorer 8以降)、Firefox、Google Chrome、Safari。

LESSのインストール

LESSのインストールについて理解しましょう。

Step 1 −必要 NodeJsLESSの例を実行します。NodeJをダウンロードするには、リンクを開きますhttps://nodejs.org/en/、以下のような画面が表示されます-

zipファイルの最新機能バージョンをダウンロードします。

Step 2−セットアップを実行して、Node.jsをシステムにインストールします。

Step 3−次に、NPM(Node Package Manager)を介してサーバーにLESSをインストールします。コマンドプロンプトで次のコマンドを実行します。

npm install -g less

Step 4 − LESSのインストールが成功すると、コマンドプロンプトに次の行が表示されます−

`-- [email protected]
   +-- [email protected]
   | `-- [email protected]
   +-- [email protected]
   +-- [email protected]
   +-- [email protected]
   +-- [email protected]
   | `-- [email protected]
   +-- [email protected]
   | `-- [email protected]
   +-- [email protected]
   | +-- [email protected]
   | +-- [email protected]
   | | `-- [email protected]
   | |   +-- [email protected]
   | |   `-- [email protected]
   | +-- [email protected]
   | | `-- [email protected]
   | |   +-- [email protected]
   | |   +-- [email protected]
   | |   +-- [email protected]
   | |   +-- [email protected]
   | |   +-- [email protected]
   | |   `-- [email protected]
   | +-- [email protected]
   | +-- [email protected]
   | | `-- [email protected]
   | +-- [email protected]
   | +-- [email protected]
   | +-- [email protected]
   | | `-- [email protected]
   | +-- [email protected]
   | | +-- [email protected]
   | | | +-- [email protected]
   | | | | `-- [email protected]
   | | | +-- [email protected]
   | | | +-- [email protected]
   | | | | `-- [email protected]
   | | | +-- [email protected]
   | | | `-- [email protected]
   | | +-- [email protected]
   | | | `-- [email protected]
   | | +-- [email protected]
   | | | +-- [email protected]
   | | | +-- [email protected]
   | | | | `-- [email protected]
   | | | +-- [email protected]
   | | | `-- [email protected]
   | | `-- [email protected]
   | |   `-- [email protected]
   | +-- [email protected]
   | | +-- [email protected]
   | | +-- [email protected]
   | | +-- [email protected]
   | | `-- [email protected]
   | +-- [email protected]
   | | +-- [email protected]
   | | +-- [email protected]
   | | | +-- [email protected]
   | | | +-- [email protected]
   | | | `-- [email protected]
   | | `-- [email protected]
   | |   +-- [email protected]
   | |   +-- [email protected]
   | |   | `-- [email protected]
   | |   +-- [email protected]
   | |   +-- [email protected]
   | |   +-- [email protected]
   | |   `-- [email protected]
   | +-- [email protected]
   | +-- [email protected]
   | +-- [email protected]
   | +-- [email protected]
   | | `-- [email protected]
   | +-- [email protected]
   | +-- [email protected]
   | +-- [email protected]
   | +-- [email protected]
   | +-- [email protected]
   | `-- [email protected]
   `-- [email protected]

以下は、LESSの簡単な例です。

hello.htm

<!doctype html>
   <head>
      <link rel = "stylesheet" href = "style.css" type = "text/css" />
   </head>
   
   <body>
      <h1>Welcome to TutorialsPoint</h1>
      <h3>Hello!!!!!</h3>
   </body>
</html>

ここで、CSSに非常によく似たファイルstyle.lessを作成しましょう。唯一の違いは、.less拡張子で保存されることです。.html.lessの両方のファイルをフォルダー内に作成する必要がありますnodejs

style.less

@primarycolor: #FF7F50;
@color:#800080;
h1 {
   color: @primarycolor;
}

h3 {
   color: @color;
}

次のコマンドを使用して、style.lessファイルをstyle.cssにコンパイルします-

lessc style.less style.css

上記のコマンドを実行すると、style.cssファイルが自動的に作成されます。LESSファイルを変更するときはいつでも、上記のコマンドをで実行する必要があります。cmdその後、style.cssファイルが更新されます。

style.cssには、あなたが上記のコマンドを実行すると、ファイルには、次のコードを持っています-

style.css

h1 {
  color: #FF7F50;
}

h3 {
  color: #800080;
}

出力

上記のコードがどのように機能するかを確認するために、次の手順を実行してみましょう-

  • 上記のhtmlコードをに保存します hello.htm ファイル。

  • このHTMLファイルをブラウザで開くと、次の出力が表示されます。