2

これを行うためのよりクリーンな方法はありますか？

@each $prefix in webkit moz ms o {

    -#{$prefix}-transition: all 1s linear;
}
transition: all 1s linear;

私は冗長性が嫌いで、もっと簡単にできるといいのですが

編集：

ただ明確にします。トランジションを実装する方法を探していません。私が欲しいのは、より単純なコードです。例では、私が販売物件の2倍を書いていることがわかります。これを最適化したいと思います。ここに私が探しているものの例があります（しかしこれは有効なSCSSではありません）

@each $prefix in "-webkit-", "-moz-", "-ms-", "-o-", "" {

    #{$prefix}transition: all 1s linear;
}
4

3 に答える 3

16

プレフィックスが必要なプロパティはトランジションだけではありません。ベンダーがサポートを追加すると、プレフィックスの追加を停止できます。ミックスインの各部分を抽象化すると、コードは長期的にはより保守しやすくなります。

$default-prefixes: webkit moz ms o;

@mixin build-prefix-values($property, $value, $prefixes: $default-prefixes) {
    @each $prefix in $prefixes {
        -#{$prefix}-#{$property}: #{$value};
    }
    #{$property}: #{$value};
} 

@mixin transition($property: all, $delay: 1s, $timing: linear) {
    $value: $property $delay $timing;
    // use default prefixes
    @include build-prefix-values('transition', $value);
}

// using defaults of 'all' '1s' and 'linear'
p {
    @include transition();
}

// using custom values
.fast {
    @include transition('height', '.1s', 'ease', '0');
}

border-radiusここで、必要なプレフィックスがどこにあるかについて@mixinを記述したいとしますwebkit。

@mixin border-radius($radius) {
    $prefixes: webkit;
    @include build-prefix-values('border-radius', $radius, $prefixes);
}
于 2012-05-27T19:23:59.900 に答える
1

unquote sass関数を使用して、各プレフィックスの引用符を外すことができます。つまり：

@each $prefix in "-webkit-", "-moz-", "-ms-", "-o-", "" {
    #{unquote($prefix)}transition: all 1s linear;
}

私はそれを達成するためのよりクリーンな方法だと思います。

于 2013-06-19T22:17:57.127 に答える
0

バーボンにはあなたが持っているようなミックスインがあります（ちなみに、似たようなものがたくさん必要なときに使用することをお勧めします）：http ://thoughtbot.com/bourbon/#transitions

そしてそのコード：https ：//github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/functions/_transition-property-name.scss

これに基づいて、多かれ少なかれ最適なソリューションがあります。

于 2012-05-26T15:10:37.643 に答える