3

これが私がやろうとしていることです。可変数のプロパティを許可する mixin を作成したいと思います。また、(この例では) トランジションに単一の DRY 値を使用できるようにします。したがって、「ボックスの影、境界線、および幅 @ .2s をイーズインで移行する」と言えます。

これは、頭のてっぺんから離れたかなり深刻な疑似コードです。私が最も確信が持てない部分は、適切な方法でコンパイルされるようにリストを取得する方法です。append が正しい方法かどうか、または文字列 var を連結する必要があるかどうかはわかりませんでした。

/* move object*/
.moveit{
    @include grouped-trans((box-shadow, border, width), 0.2s, ease-in);
}

/* mixin */
@mixin grouped-trans($list, $time, $ease)
{
    @each $prop in $list {
        //transition: append($prop, $time, $ease);
        // - or -
        //$tmp_var + $list, $time, $ease;
}

文字列補間 #{} などのメソッドを使用し、「...」をパラメーターとして含める方法を使用して、変数の引数を組み込む方法があることを私は知っています。しかし、理想的には、私が説明した方法でこれを実行する方法を見つけたいと思っています。

4

1 に答える 1

3

探しているミックスインを構築する方法は次のとおりです。これにはCompassの使用が必要ですが、 Compassを使用せずに Sass を使用するのはばかげていることに注意してください。

@import "compass";

@mixin grouped-trans($list, $time, $ease) {
  @include transition-property($list);
  @include transition-duration($time);
  @include transition-timing-function($ease);
}

.moveit {
  @include grouped-trans((box-shadow, border, width), 0.2s, ease-in);
}

上記の SCSS は、次の CSS にコンパイルされます。

.moveit {
  -webkit-transition-property: box-shadow, border, width;
  -moz-transition-property: box-shadow, border, width;
  -o-transition-property: box-shadow, border, width;
  transition-property: box-shadow, border, width;
  -webkit-transition-duration: 0.2s;
  -moz-transition-duration: 0.2s;
  -o-transition-duration: 0.2s;
  transition-duration: 0.2s;
  -webkit-transition-timing-function: ease-in;
  -moz-transition-timing-function: ease-in;
  -o-transition-timing-function: ease-in;
  transition-timing-function: ease-in;
}
于 2013-02-09T20:12:03.227 に答える