思いつきで追加していく。
画像URLのパス解決をする係のMixin
lessファイルとcssファイルが同じレベルの階層に保存してあれば、画像URLは相対パスでそのまま書いて大丈夫。なのだけど、lessファイル自体が多階層になっていて、子lessファイルがサブディレクトリに保存してあったりすると、画像のパス入力時にエディタのオートコンプリートの恩恵にあずかれない。
そこで、"../../img/" も "../../../img/" も "../img/" に置換してしまう係の人を用意した。
/**
* @url: 画像の相対パス
* @imageRoot: 画像ディレクトリへの相対パス
*/
.background-image(@url, @imageRoot: "../img"){
@_url: `@{url}.replace(/^(\.\.\/)+img\//, @{imageRoot})`;
background-image: e(%("url(%s)", @_url));
}
.foo {
.background-image(../../../img/foo.png);
// => background-image: url(../img/foo.png);
.background-image(../../img/bar.png);
// => background-image: url(../img/bar.png);
}
フォントサイズを相対的に調整する係のMixin
ピクセル指定をemにする為だけのMixin。
/**
* @size: 指定したいフォントサイズ(px)
* @baseSize: ベースとなるフォントサイズ
* @point: 小数点以下桁数
*/
.font-size(@size, @baseSize: 16, @point: 2){
@_size: round(@size / @baseSize, @point);
font-size: e("@{_size}em");
}
.foo {
.font-size(13, 16, 2);
// => font-size: 0.81em;
.font-size(24, 16, 4);
// => font-size: 1.5em;
}