NodeJs管理Less/Sass_html/css_WEB-ITnose

推定読了時間: 5 分

はじめに

less 公式ウェブサイト http://lesscss.org/

sass 公式ウェブサイト http: // sass-lang.com/

Less はコマンドラインからインストールすることも、Nodejs の npm パッケージ管理を通じてダウンロードして管理することもできますが、sass のダウンロードとインストールには Ruby が必要です。

コマンド ラインを使用した npm install の減少

npm install -g less

知識ポイントの減少

1. 変数 変数の定義
2. ネストされたルール ネストされたルール (&現在の要素の親要素を表します)
3. 演算式
4. 関数 function
5. スコープscope
6. インポート参照ファイル

変数

@nice-blue: #5B83AD;@light-blue: @nice-blue + #111;#header {  color: @light-blue;}

出力

#header {  color: #6c94be;}

ネストされたルール

#header {  color: black;  .navigation {    font-size: 12px;  }  .logo {    width: 300px;  }}//相当于下面代码#header {  color: black;}#header .navigation {  font-size: 12px;}#header .logo {  width: 300px;}

算術式

// example with variables@base: 5%;@filler: @base * 2; // result is 10%@other: @base + @filler; // result is 15%

関数

@base: #f04615;@width: 0.5;//percentage, saturate, lighten, spin等都是函数.class {  width: percentage(@width); // returns `50%`  color: saturate(@base, 5%);  background-color: spin(lighten(@base, 25%), 8);}

スコープ

@var: red;#page {  #header {    color: @var; // white  }  @var: white;}

参照ファイル

@import "library"; // library.less@import "typo.css";

コンパイルを減らす方法は?

コマンド ラインは、less ファイルが保存されているフォルダーに入り、次のコマンドを使用してless をコンパイルします。以下は、現在のフォルダー内の CSS 出力です。 lessc コマンドの後には、less のストレージ パスと css のストレージ パスが続きます。

$ lessc styles.less styles.css

less ミドルウェアの使用法

less-middleware 公式 Web サイト: https://www. npmjs.com/package/less-middleware、プロジェクト フォルダーに入り、コマンド ラインを使用して

npm install less-middleware --save

をインストールします。