SASS mixin - 単一のプロパティを連結/折りたたむ？

Question

私は渡されたプロパティのいくつかのクロスブラウザコードを生成する単純なミックスインを書き込もうとしていますが、何回か呼び出すと何とか新しい値を既存のプロパティルールに追加します。例えば

：

=foo($foo) 
    foo: "#{$foo}" 

.test 
    +foo(test 1) 
    +foo(test 2) 

は

.test { 
    foo: "test 1"; 
    foo: "test 2"; 
} 

を生成しかし、何イムはそれを生成するために取得しようとしていることはあるだろう：私はちょうど+foo(test 1, test 2)を行うことができます知っている

.test { 
    foo: "test 1, test 2"; 
} 

が、時々私は多くの議論をしているかもしれません。インデントベースのSASS構文はmiを分割できないので（悲しいことに）複数の引数に対してxin引数を使用する場合、1つの行に多数の引数を入れずにこのミックスインを使用する方がいいです。

Answer 1

Sassはあなたが探しているものを処理しませんが、ラッパーを含みます。なぜ私は以下の反パターンを考えますか？

Demo on codepen

注意！以下は、いくつかの工夫が必要かもしれませんが、今の私は（広い聴衆のために）いくつかのSCSSにスローされます - 私はあなたがグローバル変数、我々が作成

まずサスに

を変換することができます確信しています状態と値を保持するグローバル変数のセットが含まれます。

$render-map:(); // map to hold key value pairs for later render 
$render: false; // render flag if true we print out render-map 
$concat: false; // concat flag to trigger value concatenation 

私たちはミックスインをレンダリングマルチ使い方を作成レンダリングする何を追跡する面倒な作業を処理するためのmixin

をレンダリングします。ミックスインは他のミックスインの中でキー値と内部セレクタを設定して一意のプロパティを表示することができます。私たちは後で値の連結を扱う小さなmixinを作成します。これはこれがあまり一般的でないためです。

@mixin render($args...){ 
    // no arguments passed and not in the state of rendering 
    // 1) switch to rendering state 
    // 2) include content (nested included) 
    // 3) render render-map content 
    // 4) before exit disable render state 
    // 5) empty render-map 
    @if length($args) == 0 and not $render { 
     $render: true !global; // 1 
     @content;    // 2 
     @each $key, $value in $render-map { #{$key}:$value; } // 3 
     $render: false !global; // 4 
     $render-map:() !global; // 5 
    } 

    // if arguments are passed we loop through keywords to build our render-map 
    // the keyword key is the same as the passed variable name without the `$` 
    // e.g. @include render($margin-left: 10px) becomes margin-left: 10px 
    // 1) get keywords 
    // 2) loop through keywords 
    // 3) look for existing render-map values or use empty list 
    // 4) in case we have a concat flag concatinate render-map value 
    // 5) in case we don't have a concat flag we overwrite render-map value 
    // 6) add key value pair to render-map 
    @else { 
     $keywords: keywords($args);  // 1 
     @each $key, $value in $keywords { // 2 
      $map-value: map-get($render-map, $key) or(); // 3 
      @if $concat { $map-value: if($map-value, append($map-value, $value, comma), $value); } // 4 
      @else { $map-value: if($value, $value, $map-value); } // 5 
      $render-map: map-merge($render-map, ($key: $map-value)) !global; // 6 
     }   
    } 
} 

我々はグローバル連結フラグを扱う私たちのレンダリングミックスインのラッパー・ミックスインを作成する値の連結を処理するために、連結方式

をレンダリングします。

注意render-concatは、ミックスイン内のキーと値のペアを設定するためにのみ使用されます。なぜ、コンテンツブロックを使用しないのですか。

@mixin render-concat($args...){ 
    $concat: true !global;  // set global concat flag for render mixin 
    @include render($args...); // pass args on to the render mixin 
    $concat: false !global; // reset global concat flag 
} 

使用

@mixin foo($value){ 
    // add the passed value to the `foo` key ($ is stripped) of the render-map.  
    @include render-concat($foo: $value); 
} 


.test { 
    // in order to render our render-map content we wrap our includes 
    // inside a @include render (without any arguments). 
    // note the quoted strings to prevent sass from thinking we are passing lists 
    @include render { 
     @include foo('test 1'); 
     @include foo('test 2'); 
     @include foo('test 3'); 
    } 
} 

出力

.test { 
    foo: "test 1", "test 2", "test 3"; 
} 

としては、あなたが簡単に予期しない出力を得ることができる...これを使用して非常に注意が必要と述べました。