Posted at

Lessでつかっている細かすぎるMixinの記録

More than 5 years have passed since last update.

思いつきで追加していく。


画像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;
}