LESS CSS の戸惑いやすい記法

CSS / Less


最新版の LESS 1.5.x では動作が異なる可能性があります。
CSS で変数や関数を使えるよう拡張して再利用性を高めた言語 LESS。CSS と同じように書けるため、ちょっとだけ使う分には覚えることはほとんどない。

文字列を結合する

文字列中に "@{varname}" と書くことにより、文字列中で変数を展開することができる。

@imageDir: "../images";

.image-replacement (@image, @width, @height) {
    display: inline-block; width: @width; height: @height;
    overflow: hidden; text-indent: 100%; white-space: nowrap;
    background: url("@{imageDir}/@{image}") no-repeat 0 0;
}

引用符のつかない文字列として展開する

文字列として引数を与えても、引用符を付けたくない場合は ~ を利用する。

.with(@str) { prop: @str; }
.without(@str) { prop: ~"@{str}"; }

a { .with("some value"); }
b { .without("some value"); }

出力

a { prop: "some value"; }
b { prop: some value; }

可変引数をコンマで区切る

可変引数を受け取るための @arguments や @varname... は通常、スペースで区切られて展開される。これを防ぐためには先ほどの文字列展開を使うか、エスケープと eval を組み合わせる。

.mixin(@arg1, @arg2, ...) {
    @args: ~`"@{arguments}".replace(/^\[|\]$/g, "")`;
    hoge: @arguments;
    huga: `"@{arguments}"`;
    piyo: @args;
}

p { .mixin(apple, bee, citron); }

出力

p {
    hoge: apple bee citron;
    huga: "[apple, bee, citron]";
    piyo: apple, bee, citron;
}

LESS の文法上使えない文字が入るとエラーになるので、文字列として扱うほうがやりやすいかも。