Question

我为面板创建了一个Sass网格，如何使用Sass函数或Sass循环修改它？是否可以使用each功能？我该如何实现它？我正在使用Foundation Zurb 6 grid mixin。

.#{$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); }
      }
    }
  }
}

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

网格的Sass功能

1 个答案: