LESSの関数

このレッスンでは、関数の使い方について見ていきます。関数はミックスインに似ていますが、値が変わる可能性のあるパラメータを追加することができます。

これらのパラメータは、関数の括弧内で渡されます。例で見てみましょう。

フォントサイズを設定する関数fsを作ってみましょう。サイズはパラメータで渡されるようにします。パラメータとして機能するのは、関数の宣言時に考えた名前の変数です:

.fs(@size) {
	// ここに関数のコードが入ります
}

関数内で、パラメータの値をどこに挿入するかを指定してみましょう:

.fs(@size) {
	font-size: @size;
}

希望する要素のサイズをパラメータとして渡して、関数を呼び出してみましょう:

p {
	.fs(20px);
}

結果、コンパイル後の段落のフォントサイズは指定された値になります:

p {
	font-size: 20px;
}

要素の幅を設定する関数w()を作成してください。

要素の高さを設定する関数h()を作成してください。