Less-mixin-multiple-param
提供:Dev Guides
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ファイルをブラウザで開くと、次の出力が表示されます。