我可以在 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); 我想让mixin输出这样的东西：

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

我知道$args 允许您在一个mixin 中包含多个值，但它显然不起作用，因为我可能没有正确使用它！

Answer 1

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

或者

包含一个 mixin 并将参数作为 arglist 传递。可以根据您的需要以不同的方式完成。

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