レス-Mixin Guards

説明

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

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

Sr.No.	Types & Description
1	Guard Comparison Operators 比較演算子（=）を使用して、数値、文字列、識別子などを比較できます。
2	Guard Logical Operators _and_キーワードを使用して、ガード付きの論理演算子を回避できます。
3	Type Checking Functions 一致するミックスインの値タイプを決定するための組み込み関数が含まれています。
4	Conditional Mixins LESSは_default_関数を使用して、mixinを他のミキシング一致と一致させます。

例

次の例は、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 finddevguides...</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-guardl ファイルに保存します。
このHTMLファイルをブラウザで開くと、次の出力が表示されます。

ミキシンガード

Less-mixin-guards

目次

レス-Mixin Guards

説明

例

style.less

style.css

出力