Less-installation
提供：Dev Guides
LESS-インストール
この章では、LESSのインストール方法を段階的に理解します。
LESSのシステム要件
- オペレーティングシステム-クロスプラットフォーム
- ブラウザのサポート-IE（Internet Explorer 8 +）、Firefox、Google Chrome、Safari。
LESSのインストール
LESSのインストールについて理解しましょう。
ステップ1 *-LESSの例を実行するには、 *NodeJs が必要です。 NodeJsをダウンロードするには、https://nodejs.org/en/のリンクを開きます。次のような画面が表示されます-
_最新の機能_バージョンのzipファイルをダウンロードします。
- ステップ2 *-セットアップを実行して、_Node.js_をシステムにインストールします。
- ステップ3 *-次に、NPM（Node Package Manager）を介してサーバーにLESSをインストールします。 コマンドプロンプトで次のコマンドを実行します。
npm install -g less- ステップ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の簡単な例です。
こんにちは
<!doctype html>
<head>
<link rel = "stylesheet" href = "style.css" type = "text/css"/>
</head>
<body>
<h1>Welcome to finddevguides</h1>
<h3>Hello!!!!!</h3>
</body>
</html>CSSに非常によく似た_style.less_ファイルを作成しましょう。唯一の違いは、。less_拡張子で保存されることです。 _l_と.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 ファイルに保存します。
- このHTMLファイルをブラウザで開くと、次の出力が表示されます。
