web-dev-qa-db-ja.com

スペースなしでless（css）で値を連結します

だから私は数（回転する度）を取り、要素を回転させるために正しいcssを出力するLESSミックスインを作ろうとしています。問題は、IE用に「270deg」と「3」（270/90）の両方を書く方法がわからないことです。これが私が試したことです：

.rotate(@rotation: 0) {
    @deg: deg;
    -webkit-transform: rotate(@rotation deg); // i can see why this doesn't work
    -moz-transform: rotate((@rotation)deg); // parens
    -o-transform: rotate(@rotation+deg); // variable-keyword concatenation
    transform: rotate(@rotation+@deg); // variable-variable concatenation

    // this is the reason I need @rotation to be just a number:
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=@rotation/90);
}

.someElement {
    .rotate(270)
}

今のところ、変数とキーワードの連結の間にスペースを入れないようにコンパイラスクリプトを変更しました。より良い解決策があることを願っています。

cssless
28
B T

1つの解決策は、少し醜いですが、エスケープされた文字列を使用することです。

@degs: ~"@{rotation}deg"
@degs-ie: @rotation / 90;
transform: rotate(@degs);
filter: ~"DXImageBlahBlah(rotation=@{degs-ie})"

これにはless.jsv1.1.xが必要であることに注意してください。

36
cloudhead

よりクリーンなアプローチは、unit（ 公式ドキュメント ）を使用することです。

unit(@rotation, deg)

あなたの例では次のようになります：

transform: rotate(unit(@transition, deg));

ドキュメント：

unit（dimension、unit）

  • 次元：次元の有無にかかわらず、数値
  • 単位（オプション）：変更する単位、または省略した場合は単位を削除します
24
sqren

クラウドヘッドありがとうございます。 LESS PHPのエスケープは少し異なるので、これが私にとってうまくいったことです：

.rotation(@rotation:90){
  @degs: e("@{rotation}deg");
  @degs-ie: @rotation / 90;

  -webkit-transform: rotate(@degs);
  -moz-transform: rotate(@degs);
  transform: rotate(@degs);
  filter: e("progid:DXImageTransform.Microsoft.BasicImage(rotation=@{degs-ie})");
}
3
Timo Hausmann

スペースのない連結に関するこの古い項目を見つけた人のために、問題を説明するバグ/機能のリクエストがLESS＃1375（2013年にオープン、2016年1月現在未修正）にあります。

問題：

@CharTinySpace: \\2009;
content: "@CharTinySpace@CharTinySpace";

出力：

content: " \2009 \2009 ";

これにより、ディスプレイに余分なスペースが追加されます。

解決策は、埋め込まれたJavaScriptの置換を使用することです。

@CharTinySpace: \\2009;
content: `"@{CharTinySpace}@{CharTinySpace}".replace(/ /g,"")`;

出力：

content: "\2009\2009";

最善の解決策ではありませんが、Unicodeエスケープ値の代わりに読み取り可能な変数が必要な私のインスタンスで機能した唯一の解決策です。

@CharTinySpace: \\2009;
content: "@{CharTinySpace}@{CharTinySpace}";

JavaScriptオプションが将来の発見者にとって有用な手がかりになる場合に備えて、これはここに残しておきます。

0
millebi