LESS-ミックスインガード

説明

式の単純な値または引数の数を一致させたい場合は、ガードを利用できます。これはミックスイン宣言に関連付けられており、ミックスインに関連付けられている条件が含まれています。各ミックスインには、コンマで区切られた1つ以上のガードがあります。ガードは括弧で囲む必要があります。LESSは、代わりにガードされたミックスインを使用しますif/else ステートメントを作成し、計算を実行して、一致するミックスインを指定します。

次の表に、さまざまなタイプのミックスインガードとその説明を示します。

シニア番号	タイプと説明
1	ガード比較演算子比較演算子（=）を使用して、数値、文字列、識別子などを比較できます。
2	論理演算子をガードする andキーワードを使用して、ガード付きの論理演算子を回避できます。
3	型チェック機能一致するミックスインの値型を決定するための組み込み関数が含まれています。
4	条件付きミックスイン LESSは、デフォルトの関数を使用して、ミックスインを他のミキシングマッチと一致させます。

例

次の例は、LESSファイルでのミックスインガードの使用を示しています-

<!doctype html>
   <head>
      <title>Mixin Guards</title>
      <link rel = "stylesheet" href = "style.css" type = "text/css" />
   </head>

   <body>
      <h2>Example of Mixin Guards</h2>
      <p class = "class1">Hello World...</p>
      <p class = "class2">Welcome to Tutorialspoint...</p>
   </body>
</html>

次に、style.lessファイルを作成します。

style.less

.mixin (@a) when (lightness(@a) >= 50%) {
   font-size: 14px;
}

.mixin (@a) when (lightness(@a) < 50%) {
   font-size: 16px;
}

.mixin (@a) {
   color: @a;
}

.class1 {
   .mixin(#FF0000)
}

.class2 {
   .mixin(#555)
}

次のコマンドを使用して、style.lessをstyle.cssにコンパイルできます。

lessc style.less style.css

上記のコマンドを実行します。次のコードでstyle.cssファイルを自動的に作成します-

style.css

.class1 {
   font-size: 14px;
   color: #FF0000;
}

.class2 {
   font-size: 16px;
   color: #555;
}

出力

上記のコードがどのように機能するかを確認するには、次の手順に従ってください-

上記のhtmlコードをに保存します mixin-guard.html ファイル。
このHTMLファイルをブラウザで開くと、次の出力が表示されます。

LESS-ミックスインガ​​ード

説明

例

style.less

style.css

出力

LESS-ミックスインガード