LESS-複数のパラメーターを持つミックスイン

説明

パラメーターは、_commas_または_semicolon_を使用して分離できます。コンマ記号を使用すると、mixinパラメーターの区切り記号またはcssリストの区切り記号として解釈できます。 mixin内でセミコロンを使用すると、引数がセミコロンで区切られ、CSSリストにはすべてのコンマが含まれます。

以下にリストされているように、セミコロンとカンマ上のいくつかのポイントが含まれています-

引数が2つある場合、引数にはコンマ区切りリストが含まれます。たとえば、。class1（1、2、3; sometext、other thing）。
引数が3つある場合、引数には* .class1（1、2、3）*などの数字のみが含まれます。
* .class1（1、2、3;）*のようなコンマ区切りリストでダミーセミコロンを使用できます。
コンマ区切りのデフォルト値があります。たとえば、。class1（@color：gray、green;）

構文

.mixin_name(@var_name1; @var_name2:some) {
  //code here
}

例

次の例は、LESSファイルでの複数のパラメーターのミックスインの使用を示しています-

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

   <body>
      <h2>Example of Mixin Multiple Parameters</h2>
      <p class = "myclass">LESS enables customizable, manageable and reusable style sheet for web site.</p>
   </body>
</html>

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

style.less

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

.mixin(@color; @padding: 2) {
   color: @color;
   padding: @padding;
}

.myclass {
   .mixin(#FE9A2E);
}

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

lessc style.less style.css

上記のコマンドを実行すると、次のコードで_style.css_ファイルが自動的に作成されます-

style.css

.myclass {
   color: #FE9A2E;
   padding: 2;
}

出力

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

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

Mixin Multiple Parameters

Less-mixin-multiple-param

LESS-複数のパラメーターを持つミックスイン

説明

構文

例

style.less

style.css

出力

目次