web-dev-qa-db-ja.com

sass @mixinは未定義の数の引数を受け入れることができますか？

トランジション用のsassミックスインを作成しようとしています。これは私が今まで持っているものです。

@mixin transition($var)
  -webkit-transition: $var
  transition: $var

このように複数の引数を渡せるようにしたい

@include transition(color .5s linear, width .5s linear)

残念ながら、次のエラーが発生します

Syntax error: Mixin transition takes 1 argument but 2 were passed.

未定義の数の引数を受け入れながら、cssで次の出力を生成するようにこれを行う方法はありますか？

-webkit-transition: color .5s linear, width .5s linear;
transition: color .5s linear, width .5s linear;
undefinedsassargumentsmixins
36
Ryan

変数引数

ミックスインが未知の数の引数を取ることが理にかなっている場合があります。たとえば、ボックスシャドウを作成するためのミックスインは、引数として任意の数のシャドウを取る場合があります。このような状況では、Sassは「変数引数」をサポートします。これは、ミックスイン宣言の最後にある引数で、残りのすべての引数を取り、それらをリストとしてパッケージ化します。これらの引数は通常の引数と同じように見えますが、その後に...が続きます。例えば：

@mixin box-shadow($shadows...) {
  -moz-box-shadow: $shadows;
  -webkit-box-shadow: $shadows;
  box-shadow: $shadows;
}

.shadows {
  @include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);
}

コンパイルされます：

.shadows {
  -moz-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
  -webkit-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
  box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
}

差出人： SASS公式ドキュメント

したがって、基本的には、ミックスイン宣言を次のように変更する必要があります。

@mixin transition($var...)
  -webkit-transition: $var
  transition: $var
58
Jérémie Parker

ミックスインを呼び出すときは、次のように呼び出します。

@include transition( (color .5s linear, width .5s linear) );

余分な親と。これは、これを単一の引数として使用する必要があるという事実に重要です。

[〜＃〜] edit [〜＃〜]：Sass 3.2以降を使用している場合は、上記のJeremieParkerの回答を参照してください。実変数引数は3.2で追加されました： http://chriseppstein.github.io/blog/2012/08/23/sass-3-2-is-released

37
Joseph Erickson

複数の引数とベンダープレフィックスが必要な場合は、休憩のようにシナリオ：

@include transition(transform .5s linear, width .5s linear)

期待される

-webkit-transition: -webkit-transform 0.5s linear, width 0.5s linear;
-moz-transition: -moz-transform 0.5s linear, width 0.5s linear;
-ms-transition: -ms-transform 0.5s linear, width 0.5s linear;
-o-transition: -o-transform 0.5s linear, width 0.5s linear;
transition: transform 0.5s linear, width 0.5s linear;

私はあなたにこれを提案しますMixin、私は 意味のない書き込み で見つけました。

コード

@function prefix($property, $prefixes: (webkit moz o ms)) {
    $vendor-prefixed-properties: transform background-clip background-size;
    $result: ();
    @each $prefix in $prefixes {
       @if index($vendor-prefixed-properties, $property) {
         $property: -#{$prefix}-#{$property}
       }
       $result: append($result, $property);
    }
    @return $result;
}

@function trans-prefix($transition, $prefix: moz) {
    $prefixed: ();
    @each $trans in $transition {
        $prop-name: nth($trans, 1);
        $vendor-prop-name: prefix($prop-name, $prefix);
        $prop-vals: nth($trans, 2);
        $prefixed: append($prefixed, ($vendor-prop-name $prop-vals), comma);
    }

    @return $prefixed;
}

@mixin transition($values...) { 
    $transitions: ();
    @each $declaration in $values {
        $prop: nth($declaration, 1);
        $prop-opts: ();
        $length: length($declaration);
        @for $i from 2 through $length {
            $prop-opts: append($prop-opts, nth($declaration, $i));   
        }
        $trans: ($prop, $prop-opts);
        $transitions: append($transitions, $trans, comma);
    }

    -webkit-transition: trans-prefix($transitions, webkit);
    -moz-transition: trans-prefix($transitions, moz);
    -o-transition: trans-prefix($transitions, o);
    transition: $values;
}
3
Simon Arnold

Compassには、確認できるトランジションミックスインがあります（または、Compassを使用することもできます）。ここでそれをよりよく見ることができます： http://beta.compass-style.org/reference/compass/css3/transition/ 。

CompassのメンテナはSassの保守も支援するため、見た目では未定義の数のミックスインを実行することはできません。また、トランジションミックスインに対して最大10個の個別の引数を定義していることがわかります。

0
nheinrich