网格的 Sass 函数

Question

我为面板创建了 Sass 网格，如何使用 Sass 函数或 Sass 循环对其进行修改？是否可以使用each 功能？我将如何实施它？我正在使用 Foundation Zurb 6 网格混合。

.#{$id}{
 @at-root .#{$columns}{
  // padding: 0 !important;
  &-12{
   @include grid-column;
  }
  &-11{
   @include grid-column(11 of 12);

  }
  &-10{
   @include grid-column(10 of 12);
  }
  &-9{
   @include grid-column(9 of 12);
  }
  &-8{
   @include grid-column(8 of 12);
  }
  &-7{
   @include grid-column(7 of 12);
  }
  &-6{
   @include grid-column(6 of 12);
  }
  &-5{
   @include grid-column(5 of 12);
  }
  &-4{
   @include grid-column(4 of 12);
  }
  &-3{
   @include grid-column(3 of 12);
  }
  &-2{
   @include grid-column(2 of 12);
  }
  &-1{
   @include grid-column(1 of 12);
  }
}

@include breakpoint (medium){

&-medium{
  &-12{
   @include grid-column;
  }
  &-11{
   @include grid-column(11 of 12);

  }
  &-10{
   @include grid-column(10 of 12);
  }
  &-9{
   @include grid-column(9 of 12);
  }
  &-8{
   @include grid-column(8 of 12);
  }
  &-7{
   @include grid-column(7 of 12);
  }
  &-6{
   @include grid-column(6 of 12);
  }
  &-5{
   @include grid-column(5 of 12);
  }
  &-4{
   @include grid-column(4 of 12);
  }
  &-3{
   @include grid-column(3 of 12);
  }
  &-2{
   @include grid-column(2 of 12);
  }
  &-1{
   @include grid-column(1 of 12);
  }
}
}
   @include breakpoint (large){
  &-large{
  &-12{
   @include grid-column;
  }
  &-11{
   @include grid-column(11 of 12);

  }
  &-10{
   @include grid-column(10 of 12);
  }
  &-9{
   @include grid-column(9 of 12);
  }
  &-8{
   @include grid-column(8 of 12);
  }
  &-7{
   @include grid-column(7 of 12);
  }
  &-6{
   @include grid-column(6 of 12);
  }
  &-5{
   @include grid-column(5 of 12);
  }
  &-4{
   @include grid-column(4 of 12);
  }
  &-3{
   @include grid-column(3 of 12);
  }
  &-2{
   @include grid-column(2 of 12);
  }
  &-1{
   @include grid-column(1 of 12);
  }
}
}
}

Answer 1

尝试几个循环：

.#{$id} {
  @at-root .#{$columns} {
    @for $column from 1 through 12 {
      &-#{$column} { @include grid-column(#{$column} of 12); }
    }
  }

  @include breakpoint (medium) {
    &-medium {
      @for $column from 1 through 12 {
        &-#{$column} { @include grid-column(#{$column} of 12); }
      }
    }
  }

  @include breakpoint (large) {
    &-large {
      @for $column from 1 through 12 {
          &-#{$column} { @include grid-column(#{$column} of 12); }
      }
    }
  }
}

当然，您可以创建断点列表并循环遍历它们，但这会降低样式的可读性。