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

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

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