web-dev-qa-db-ja.com

文字列とvarlesscssを連結します

誰かが変数と文字列をLESSで連結して、それらの間にスペースがないようにする方法を教えてもらえますか？

私は次のコードを持っています：

.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;
}

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

ありがとうピート

cssless
17
Peter J Harrison

後発者がこのスレッドを見つけた場合：

これには組み込み関数があります。

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

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

http://lesscss.org/#reference

44
Mike

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

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

しかし、lesscss.orgにはこれがあります：less 1.3.1より前は、（〜 "@ {name}"）タイプのセレクターがサポートされていました。 これに対するサポートは近い将来削除されます。

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

6
ZdenekD

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

4
Christoph Leiter

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

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

出力：

width: calc(33% - 12px);
2
miro

これが私が最近同様の問題を解決した方法です。

.text(@size: 10) {
  font-size: e(%("%dpx", @size));
  line-height: e(%("%dem", @size/10));
}

％（ "string"、value）関数は単に文字列をフォーマットするため、文字列内の％dを取得し、値に変換します。ここでの例： http://cdpn.io/hAbwl

これがお役に立てば幸いです。

2
luzzuc