我可以在Sass中爲一個屬性使用多個值嗎？

Question

與我的問題here略有關係。

說在Sass中，如果我希望對一個屬性使用多個值，是否有一種方法可以使用mixin來實現此目的？

注：我知道我的使用@each是錯誤的，但這有助於說明我正在嘗試做什麼。

到目前爲止，我有以下

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

它的用法如下：@include('grid-template-rows', 2, 1, 1);我想獲得的混入輸出是這樣的：

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

我知道$args可以讓你在mixin中包含多個值，但顯然不能正常工作，因爲我可能沒有正確使用它！

Answer 1

爲什麼不只是@include('grid-template-rows', '2fr 1fr 1fr');？

或

包含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; 
      } 
      } 
     */