Less-type-checking-functions

提供:Dev Guides
移動先:案内検索

LESS-型チェック関数

説明

型チェック組み込み関数を使用して、一致するミックスインの値型を決定できます。 これを行うには、_is_関数を使用できます。 以下は利用可能な機能のリストです-

  • iscolor
  • isnumber
  • isstring
  • iskeyword
  • isurl

上記の関数は、基本的な型チェックに含まれます。 次の機能を使用して、値が特定の単位にあるかどうかを確認できます-

  • ispixel
  • 割合
  • isem
  • isunit

次の例は、LESSファイルでの型チェック関数の使用を示しています-

<!doctype html>
   <head>
      <title>Type Checking Functions</title>
      <link rel = "stylesheet" href = "style.css" type = "text/css"/>
   </head>

   <body>
      <h2>Example of Type Checking Functions</h2>
      <p class = "myclass">Hello World!!!Welcome to finddevguides...</p>
   </body>
</html>

次に、_style.less_ファイルを作成します。

style.less

.mixin (@a; @b: red) when (iscolor(@b)){
   color:blue;
}

.mixin (@a) {
   font-size: @a;
}

.myclass { .mixin(20px) }

次のコマンドを使用して、_style.less_を_style.css_にコンパイルできます-

lessc style.less style.css

次に、上記のコマンドを実行します。それは次のコードで自動的に_style.css_ファイルを作成します-

style.css

.myclass {
   color: blue;
   font-size: 20px;
}

出力

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

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

Mixin Guards