Функция 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); } 
     } 
    } 
    } 
} 

Конечно, вы можете создать список точек останова и петли через них, но он будет делать стили менее читаемым.