28

だから私は、数字（回転する角度）を取り、正しいcssを出力して要素を回転させるLESS mixinを作ろうとしています。問題は、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)
}

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

4

4 に答える 4

37

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

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

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

于 2011-05-20T06:07:20.957 に答える
26

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

unit(@rotation, deg)

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

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

ドキュメンテーション：

unit(寸法、単位)

  • 次元: 次元の有無にかかわらず数値
  • unit (オプション): 変更先の単位、または省略した場合は単位が削除されます
于 2013-08-22T11:37:53.930 に答える
3

ありがとうクラウドヘッド。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})");
}
于 2012-03-07T09:20:47.433 に答える
0

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

問題：

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

出力：

content: " \2009 \2009 ";

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

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

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

出力：

content: "\2009\2009";

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

更新: Seven-phases-max のおかげで、適切な解決策ははるかに簡単になりました。

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

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

于 2016-01-13T20:05:48.443 に答える