18

私は両方に変換する2つのミックスインを持っています-webkit-transform:

.rotate(@deg) {
  -webkit-transform: rotate(@deg);
}

.scale(@factor) {
  -webkit-transform: scale(@factor);
}

一緒に使うと：

div {
  .rotate(15deg);
  .scale(2);
}

...それらは（予想どおり）次のように表示されます：

div {
  -webkit-transform: rotate(15deg);
  -webkit-transform: scale(2);
}

2 番目が 1 番目よりも優先されるため、これは有効な CSS ではないようです。最初のものは破棄されます。エントリを結合transformするには、次のようにする必要があります。

-webkit-transform: rotate(15deg) scale(2);

このような CSS を LESS で生成するにはどうすればよいですか。つまり、複数のtransformエントリを正しく組み合わせるにはどうすればよいですか?

4

4 に答える 4

9

Less v1.7.0 以降では、プロパティ値をスペース区切りでマージすることが可能であり、2 つの mixin を 1 つにする必要はありません。

以下の Less コード

.rotate(@deg) {
  -webkit-transform+_: rotate(@deg);
}

.scale(@factor) {
  -webkit-transform+_: scale(@factor);
}

div{
    .rotate(45deg);
    .scale(1.5);
}

次の CSS にコンパイルされます。

div {
  -webkit-transform: rotate(45deg) scale(1.5);
}
于 2014-11-04T13:40:47.673 に答える
8

単一の mixin の引数として変換を提供します。

.transform(@scale,@rotate) {
  -webkit-transform: @arguments;
}

ガードの助けを借りて、別々の mixin を 1 つに連結することもできると思いますが、完全にはわかりません;)

パーサーは後でコードを変更する必要があるため、別の方法ではこれを達成できないと思いますが、これは不可能です。

于 2012-03-10T12:00:27.810 に答える
3

それを超える簡単な方法があると思います.eleemntのdivコンテナを作成し、最初の変換をcntainerに適用し、2番目の変換を要素自体に残します

于 2012-12-11T12:37:53.837 に答える
1

@arguments を機能させるのに問題がありました。トリックを行った@rest 変数を使用しました

LESS の例:

.transform(@rest...) {
   transform: @rest;
   -ms-transform: @rest;
   -webkit-transform: @rest;
}

.someClass{
   .transform(translate3D(0,0,0),scale(1,1));
}

.otherClass{
   .transform(translate3D(0,0,0),rotate(1,1));
}

.anotherClass{
   .transform(rotate(1,1));
}

出力 CSS:

.someClass {
  transform: translate3D(0, 0, 0) scale(1, 1);
  -ms-transform: translate3D(0, 0, 0) scale(1, 1);
  -webkit-transform: translate3D(0, 0, 0) scale(1, 1);
}
.otherClass {
  transform: translate3D(0, 0, 0) rotate(1, 1);
  -ms-transform: translate3D(0, 0, 0) rotate(1, 1);
  -webkit-transform: translate3D(0, 0, 0) rotate(1, 1);
}
.anotherClass {
  transform: rotate(1, 1);
  -ms-transform: rotate(1, 1);
  -webkit-transform: rotate(1, 1);
}
于 2014-04-09T19:37:27.703 に答える