0081プリプロセッサ少ないです

メンテナンス医療過誤CSS

CSSは、非手続き型言語、ない変数、関数、SCOPE(スコープ)の概念です。

  • 一見非論理的な多くのコードを書くためのCSSの必要性は、CSSの冗長性は比較的高いです。
  • 便利なメンテナンスや拡張は、再利用に資するものです。
  • CSSには良い計算能力ではありません
  • 非フロントエンドの開発エンジニアはよく組織と簡単に保守CSSコードプロジェクトを記述することは困難であることが多いので、経験の書き込みやCSSの不足のため、懸念しています。

あまり紹介

以下(スリムスタイルシートの略語)CSSは、CSSプリプロセッサとなっている、言語拡張です。あまりの中国のウェブサイト:HTTP:// 以下css.cn/

CSSの拡張の形として、それはCSS機能を減らすが、手続き型言語のCSSプロパティを追加するための既存のCSSの構文ではありません。

これは、上記のCSSの構文に基づき、変数の導入である、(混合)、だけでなく、動作機能およびその他の機能ミックスインは、大幅にその名プットそれ、少ないよう、CSS、CSSの準備と減少メンテナンスコストを簡素化それは私たちがより少ないコードでより多くを行うことができます。

一般的なCSSプリプロセッサ:サス、あまり、スタイラス。

言って:未満はCSSの動特性を拡張CSSプリプロセッサ言語です。


以下のインストール

①設置nodejs、バージョン(8.0)を選択し、URL:http://nodejs.cn/download/

バージョンを表示する②---(win10が窓+ rがCMDを入力開くために実行される)cmdのコマンドを使用して、インストールが成功したかどうかを確認してください入力「ノード-v」

③ベースのオンラインインストール少ないがnodejs、缶「あまり-gインストールNPM」cmdのコマンドを使用します。

④バージョンを表示するには、「lessc -v」cmdのコマンドを使用して、インストールが成功したかどうかを確認してください


変数の少ない使用

変数に値を固定されていない、変更することができます。このよう定期的に使用されている私たちのCSSのようにいくつかの色と値ので。

@变量名:值;
  • そこ接頭辞が必要です。
  • 特殊文字が含まれていません
  • あなたは数字で始めることはできません
  • 大文字と小文字を区別する
@color: pink;

以下のコンパイル:vscode以下のプラグイン

簡単LESSは、プラグインファイル以下のCSSファイルをコンパイルするために使用されます。

vscode下に設置プラグイン、リロード。

ただ、それに少ないファイルが自動的に生成されたCSSファイルを保存します。

ここに画像を挿入説明


以下のネスト
// 将css改为less
#header .logo {
  width: 300px;
}

#header {
    .logo {
       width: 300px;
    }
}
アンパサンドの使用

満たされた場合(交差点|擬似クラス|擬似要素セレクタ)は、&使用して接続します

a:hover{
    color:red;
}
a{
  &:hover{
      color:red;
  }
}
少ない操作

任意の数字、色や変数が操作に関与することができます。以下はプラス(+)が設けられ、減算( - )、乗算(*)、演算に加えて、(/)。

  • 乗算記号(*)、除算(/)言葉遣い
  • オペレータは5 + 1ピクセル程度によって中間空間を区切っています
  • 計算のために、単位値の異なるユニットの2つの値の間の計算結果は、の値をとります
  • 2つの値の間の唯一の値の単位が存在する場合、操作の結果は、単位を取ります
/*Less 里面写*/
@witdh: 10px + 5;
div {
    border: @witdh solid red;
}
/*生成的css*/
div {
  border: 15px solid red;
}
/*Less 甚至还可以这样 */
width: (@width + 5) * 2;

おすすめ

転載: www.cnblogs.com/jianjie/p/12127308.html