Sassの1つのプロパティに複数の値を使用できますか？

Question

私の質問hereにちょっと関連しています。

Sassでは、1つのプロパティに複数の値を使用したい場合は、mixinを使用してこれを達成できる方法がありますか？

NB：私は@eachの私の使用法が間違っていることを知っていますが、これは私がしようとしていることを説明するのに役立ちます。 @include('grid-template-rows', 2, 1, 1);そして、私はこのような何かを出力にミックスインを取得したいのですが：次のように

これまでのところ、私はそれは使い方だ次

@mixin grid-fractions($grid-type, $args) { 
    @supports (display:grid) { 
    display: grid;  
    #{$grid-type}: @each $args #{$args}fr; 
    } 
} 

を持ってはいる

@supports (display:grid) { 
    display: grid;  
    grid-template-rows: 2fr 1fr 1fr; 
    } 

私が知っている$argsことmixinに複数の値を含めることができますが、私はおそらく正しく使用していないので、明らかに機能しません！

Answer 1

なぜ@include('grid-template-rows', '2fr 1fr 1fr');ではないのですか？

または

arglistとしてmixinとpassパラメータを含めます。それはあなたが望むものに応じて異なる方法で行うことができます。

@mixin grid($template-rows:null,$template-cols:null,$template-areas:null){ 
    @supports (display:grid) { 
     display:grid; 
     $grid-rows:(); 
     $grid-cols:(); 
     $grid-areas:(); 

     @each $rows in $template-rows{ 
     $grid-rows: append($grid-rows, #{$rows}fr); 
     } 
     @each $cols in $template-cols{ 
     $grid-cols: append($grid-cols, #{$cols}fr); 
     } 
     @each $areas in $template-areas{ 
     $grid-areas: append($grid-areas, #{$areas}fr); 
     } 
     grid-template-rows:#{$grid-rows}; 
     grid-template-columns:#{$grid-cols}; 
     grid-template-areas:#{$grid-areas}; 
    } 
    } 

html{ 
    @include grid(1 2 3, 4 5 6, 7 8 9); 
    } 

 /* 
      // Outputs: 
      @supports (display: grid) { 
      html { 
       display:grid; 
       grid-template-rows: 1fr 2fr 3fr; 
       grid-template-columns: 4fr 5fr 6fr; 
       grid-template-areas: 7fr 8fr 9fr; 
      } 
      } 
     */