LESSにおけるカンマを含むパラメータ
ブロックのシャドウを作成する関数があるとします:
.shadow(@s) {
box-shadow: @s;
}
ご覧の通り、この関数はパラメータを1つ持っています。 これは、スペース区切りでシャドウのすべての値を このパラメータに渡すことを意味します。次のように:
div {
.shadow(1px 1px red);
}
しかし、CSSではカンマで区切って複数のシャドウを 指定することができます。残念ながら、この場合、 カンマは関数のパラメータの区切りとして コンパイラに解釈されてしまうため、それはできません:
div {
.shadow(1px 1px red, 1px 1px blue); // エラーが発生します
}
しかし、解決策があります。LESSにカンマを含む 文字列を1つのパラメータとして解釈させることができます。 そのためには、値のリストをセミコロンで終了させる必要があります:
div {
.shadow(1px 1px red, 1px 1px blue;);
}
背景を追加する関数を作成してください。 この関数を使用して、ブロックに複数の背景を追加してください。