NodeJs管理Less/Sass_html/css_WEB-ITnose-htmlチュートリアル-php.cn

NodeJs管理Less/Sass_html/css_WEB-ITnose

WBOY

リリース： 2016-06-21 08:48:37

オリジナル

1026 人が閲覧しました

推定読了時間: 5 分

はじめに

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

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

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

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

npm install -g less

ログイン後にコピー

知識ポイントの減少

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

変数

@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

ログイン後にコピー

をインストールします。