LESSの関数

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

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

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

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

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

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

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

styles.lessp {
  .fs(20px);
}

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

styles.cssp {
  font-size: 20px;
}