LESSにおけるcalc関数
CSSの関数calcのラッパーとなる関数を作ってみましょう。
この関数は、最初のパラメータとしてプロパティ名を受け取り、
2番目のパラメータとして計算される値を受け取るようにします:
.calc(@name, @calc) {
@{name}: calc(@calc);
}
作った関数を使ってみます:
p {
.calc(width, ~'10px + 30%');
}
コンパイル結果:
p {
width: calc(10px + 30%);
}
次のコードをコンパイルした結果はどうなるか説明してください:
p {
.calc(width, ~'10px + 30%');
.calc(height, ~'10px + 30%');
}