非公式文書検討メモ_html/css_WEB-ITnose

LESS は css の拡張機能であり、そのエディターは、より少ないファイルを css ファイル (圧縮可能) にコンパイルする、node.js に基づくless.js です。

概念:

変数: 特定の値を置き換える変数を定義します。変数は 1 回だけコンパイルでき、本質的には「定数」です。例:

@color:#ffddee;body {  background-color:@color;      }

出力結果は次のようになります:

body {  background-color:#ffddee;}

変数は遅延ロードされ、使用されたときにのみロードされます。変数の検索順序は、下から上へ、最も近いものが最初になります。

Mixin: 選択範囲内の別のセレクターを呼び出して、その特性を定義します。例:

a {  background-color:red;  .nav;  }.nav{  font-size:14px;}

出力結果は次のようになります:

1 a {2   background-color:red;3   font-size:14px;4 }5 6 .nav {7   font-size:14px;8 }

ミキシングの際、特定の定義を表示したくない場合は、上記のコードのように定義の後に () を追加します。 .nav の定義 .nav() {....} の場合、a の定義のみが出力されます。関数呼び出しと同じです。呼び出し時に、.nav() は .nav と同等です。 .nav で変数を使用する必要がある場合は、呼び出し時に変数を渡すことができます。

@font:14px;a {    background-color:red;   .nav(@font);}.nav(@font) {  font-size:@font;  }

その中で、@font はデフォルト値を設定できます。 , 使い方はPHPと同じで、セレクターを定義するときに直接 @font=12px; を設定するだけです。

複数のパラメータを渡す場合、@argument オブジェクトを使用してすべてのパラメータを受け取り、それを配列として使用できます。 .nav が .nav(...) として定義されている場合、それは 0 個以上のパラメータを受け取ることができることを意味します。 .nav(@font,...) として定義されている場合は、@font も必須にすることができます。すべてのパラメータは @rest で受け取って配列として使用できます。

Mixin ガード: 異なる CSS に一致させるためにガードを使用します

例:

.mixin(@a) when (lightness(@a) >= 60%) {    .......output a}.mixin(@a) when (lightness(@a) < 50%) {  .........output b;}.mixin(@a) default() { .........output default}

mixin() が呼び出されるとき、渡されたさまざまなパラメーターと一致条件に従って、さまざまな出力定義が呼び出されます。ここで、default() は、他のすべての条件が一致しなかった後の操作であり、他の言語の switch case に似ています。

iscolor、isnumber、iskeyword、isurl、ispixel、ispercentage、isem、isunit などの型をチェックする関数を使用することもできます。

ネスト: DOM 内の構造に対応するようにセレクター内に別のセレクターを定義します。 例:

div {  a {    font-size:14px;   }}

コンパイルされた出力は次のようになります:

div a {  font-size:14px;}

Inherit ance: 許可を減らす:extend を使用して、別のセレクターによって定義されたプロパティを継承するセレクター。例:

.subclass {  background-color:#ccddee;  text-align:center;}.class {   color:red   &:extend(.subclass);}

ここで、 & は現在の上位オブジェクト、つまり .class 自体、つまり .a:extend(.b){ を表します。 .a{&:extend(.b);} と同等。上記の出力は次のとおりです:

rrree

継承する場合、@_ を使用して親レベルのパラメータを呼び出すことができます

統合中に all キーワードを追加すると、.a: extend などのすべての関連定義が継承されます(.b all){} は、.b 定義が出現するすべての定義を継承します

継承するとき、参照されるセレクターの後に ! important を置くと、継承されたすべての属性には! important が含まれます。

:extend は、そうしないとコンパイル エラーが発生します。 :extend は変数を含むセレクター定義と一致させることはできません。ただし、変数を含むセレクター定義は次のものを使用できます:extend

属性のマージ: マージする必要がある各属性の後に識別子として + を追加し、ネストまたは継承する場合は埋め込みます。同じ属性はマージされます

@import

Usage: @import (option) filename; 他のファイルの内容を Less ファイルにインポートします

その中で、オプション options は次の値です

reference:less ファイルを参照しますが、その内部定義は出力しません。

inline: ソース ファイルを含めますが、実行しません。

less: インポートされたファイルを、接尾辞に関係なく、less ファイルとしてコンパイルします。

css とは: サフィックス名に関係なく、インポートされたファイルを CSS ファイルとしてコンパイルします

once(デフォルト): ファイルを 1 回だけインクルードします

multiple: ファイルを複数回インクルードします。