3

現在、Compass/Sass の最初の mixin を作成しています。短い戦いの後、必要な正確な CSS を生成することができました。したがって、私の質問は出力を修正することではなく、私が行った方法をクリーンアップすることです。

私が使用しているコードの 2 つのスニペットを次に示します。完全なコードは、background-image:カンマで区切られた任意の数の線形グラデーションを含む CSS ルールを生成し、最新の W3C 形式で-webkit、moz、および接頭辞なしのグラデーション宣言を使用します (たとえば、to topではなくを使用)。bottom

私が言ったように、私は API と出力に満足しています。このコードをクリーンアップしたいだけです。

まず、w3c以下の条件付きブロックで、どうすれば私が望むものを回避できますか:

@return linear-gradient($direction, $color-stops);

... 組み込みの Compass linear-gradientmixin を呼び出していますか? (プロジェクトにすべての CSS3 Compass ヘルパーを含めています)。私が望むのは、括弧の値$directionと$color-stops括弧内を補間して、文字列を出力することだけです。

@function -gradient-rule($type, $direction, $color-stops) {
    @if $type == ('moz') {
        @return -moz-linear-gradient($direction, $color-stops);
    }
    @if $type == ('webkit') {
        @return -webkit-linear-gradient($direction, $color-stops);
    }
    @if $type == ('w3c') {

        // Terrible, terrible hack. Just couldn't work out how to write this without invoking the built-in Compass linear-gradient() function
        $prefix: linear-gradient;
        @return #{$prefix}unquote("(")#{$direction}, #{$color-stops}unquote(")");
    }
}

第二に、以下のコードをよりきれいに書く方法はありますか? すべての をループしたいのですが$gradients、それぞれ$gradientについて、最初の項目が方向宣言であり、残りがカラー ストップであると想定します。したがって、最初の項目は変数$to-directionに設定し、残りは という名前のコンマリストに設定する必要があります$color-stops。$iカウンターを必要とせずに、どうすればこれをよりうまく行うことができますか?

@each $gradient in $gradients {

    $i: 1;
    $to-direction: nth($gradient, 1);
    $color-stops: comma-list();

    @each $prop in $gradient {
        @if $i > 1 {
            $color-stops: append($color-stops, $prop);
        }
        $i: $i+1;
    }

    // old syntax is the origin of the gradient, not the destination
    $from-direction: -from-direction($to-direction);
    $moz-value: append($moz-value, -gradient-rule('moz', $from-direction, $color-stops));
    $webkit-value: append($webkit-value, -gradient-rule('webkit', $from-direction, $color-stops));

    // new syntax is the destination
    $w3c-value: append($w3c-value, -gradient-rule('w3c', $to-direction, $color-stops));

    ...
    (continues)
}

あなたが与えることができるどんな助けにも感謝します!

4

1 に答える 1

1

1）引用符で補間する以外にできることはあまりありません。これはややクリーンなハックです：

@return #{"linear-gradient("+ $direction +", "+ $color-stops +")"}

PS このコードはどのように使用しますか? 入れるのはちょっとおかしい

2) 確かにもっときれいな方法があります! 

@for $gradient-number from 2 through length($gradients) {
  $gradient: nth($gradients, $gradient-number);

  $to-direction: nth($gradient, 1);
  $color-stops: comma-list();

  @each $prop in $gradient {
    $color-stops: append($color-stops, $prop); }

  ...

は$gradient-number基本的に同じ$iなので、ロジックの違いはあまりありませんが、コードのきちんとした点で大きな違いがあります。

私が最初にこのトリックを使い始めたとき、私はちょっと不快でしたが、SASS グルもそれを使用しているのを見たので (例: 1 , 2 )、何も考えずにあなたにそれをお勧めできます.

于 2013-03-25T15:04:36.667 に答える