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ファイルをブラウザで開くと、次の出力が表示されます。