css - 文字列と var を連結して css を減らす

Question

LESS で var と文字列を連結して、それらの間にスペースが入らないようにする方法を教えてください。

次のコードがあります。

.text(@size) {
    font-size: @size + px;
    line-height: (@size / 10) + em;
}

h1 {
   .text(16)
}

LESS の出力は次のとおりです。

h1 {
    font-size: 12 px;
    line-height: 1.2 em;
}

スペースを削除する方法を見つける必要があります。

ありがとうピート

score 47 · Accepted Answer

遅刻者がこのスレッドを見つけた場合:

このための組み込み関数があります。

unit(@dimension, [@unit: ""]);

したがってfont-size: unit(@size, px);、結果はになりfont-size: 12pxます。私はそれをテストしました。

score 6 · Accepted Answer

Uは次のようなものを使用できます：

.text(@size) {
    @lineheight: @size / 10;
    font-size: ~"@{size}px";
    line-height: ~"@{lineheight}em";
}

しかし、lesscss.org では次のようになります。less 1.3.1 より前は、(~"@{name}") タイプのセレクターがサポートされていました。これに対するサポートは、近い将来削除される予定です。

別の解決方法は不可能だと思います。

score 4 · Accepted Answer

最もクリーンな方法 (文字列補間なし) は、変数に 0px を追加することだと思います@size + 0px。

score 3 · Accepted Answer

CSS 関数 (例: calc) と組み合わせて使用する必要がある場合は、次の 1 つの方法があります。

@width: 12;
width: %(~"calc(33%% - %dpx)", @width);

出力:

width: calc(33% - 12px);

score -1 · Accepted Answer

Less は値以外をスペースに置き換えるため、単位を変換するには、その単位の 0 を追加します。単位値を渡さないでください。

.my_mixin(@num) {
 @result: @num / 16; //12 / 16
 font-size: @result + 0em; //0.750em
}

p {
 .my_mixin(12);
}

これが他の誰かに役立つことを願っています。

6 に答える 6