@for и @each для создания классов столбцов сетки в Sass

Question

Я пытаюсь найти способ создания динамических классов столбцов в Sass для веб-сайта, над которым я работаю. И это то, что я до сих пор:

$breakpoints: (small: 0, medium: 640px, large: 1024px); 
$grid-columns: 12; 

@for $i from 1 through $grid-columns { 
    @each $key, $value in $breakpoints { 
    .#{$key}-#{$i} { width: (100%/$grid-columns) * $i } 
    } 
} 

Это то, что я получаю после компиляции:

.small-1 { width: 8.33333%; } 

.medium-1 { width: 8.33333%; } 

.large-1 { width: 8.33333%; } 

.small-2 { width: 16.66667%; } 

.medium-2 { width: 16.66667%; } 

.large-2 { width: 16.66667%; } 

... 

Но на самом деле, это то, что я хотел бы получить:

.small-1, .medium-1, .large-1 { width: 8.33333%; } 

.small-2, .medium-2, .large-2 { width: 16.66667%; } 

... 

Любые идеи? :)

Answer 1

Хорошо, так что я сделал ошибку, и не думаю, что намного больше, потому что на самом деле, что я на самом деле будет нуждаться был следующий вывод:

.small-1 { width: 8.33333%; } 
.small-2 { width: 16.66667%; } 
.small-3 { width: 25%; } 
... 

@media only screen and (min-width: 640px) { 
    /* line 43, ../scss/_grid.scss */ 
    .medium-1 { width: 8.33333%; } 
    .medium-2 { width: 16.66667%; } 
    .medium-3 { width: 25%; } 
    ... 
} 
@media only screen and (min-width: 1024px) { 
    .large-1 { width: 8.33333%; } 
    .large-2 { width: 16.66667%; } 
    .large-3 { width: 25%; } 
    ... 
} 

И я добился того, что Повсеместно следующий код:

$breakpoints: (small: 0, medium: 640px, large: 1024px); 
$grid-columns: 12; 

@each $key, $value in $breakpoints { 
    @if $value == 0 { 
    @for $i from 1 through $grid-columns { 
     .#{$key}-#{$i} { width: (100%/$grid-columns) * $i; }; 
    } 
    } @else if $value != 0 { 
    @include breakpoint(#{$key}) {; 
    @for $i from 1 through $grid-columns { 
     .#{$key}-#{$i} { width: (100%/$grid-columns) * $i; }; 
    }; 
    }; 
    } 
} 

Надеется, что это также может быть полезным для кого-то еще;)

Edit: с @Ram Кумар получил немного любопытно @include breakpoint(#{$key}) части, я добавляю в подмешать код ниже этого права. Должен быть лучший или более простой способ сделать это, но это то, что я мог придумать. Если вы ищете простое решение, вам понадобятся только следующие строки:

@mixin breakpoint($point) { 

    // breakpoint(medium), breakpoint(large)... 
    @each $key, $value in $breakpoints { 
     @if $point == $key and not ($value == 0) { 
      @media only screen and (min-width: #{$value}) { @content; } 
     } 
    } 

    // breakpoint(small only), breakpoint(medium only), breakpoint(large only)... 
    $i: 1; 
    @each $key, $value in $breakpoints { 

     $bp-only: $key only; 
     $bp-keys: map-keys($breakpoints); 
     $bp-values: map-values($breakpoints); 

     @if $point == $bp-only and $value == 0 { 
      @media only screen and (max-width: #{nth($bp-values, $i + 1)}) { @content; } 
     } 
     @if $point == $bp-only and not ($value == 0) and not ($key == nth($bp-keys, -1)) { 
      @media only screen and (min-width: #{$value}) and (max-width: #{nth($bp-values, $i)}) { @content; } 
     } 
     @if $point == $bp-only and $key == nth($bp-keys, -1) { 
      @media only screen and (min-width: #{$value}) { @content; } 
     } 

     $i: $i + 1; 
    } 

    // breakpoint(medium down), breakpoint(large down)... 
    @each $key, $value in $breakpoints { 
     $bp-down: $key down; 
     @if $point == $bp-down and not ($value == 0) { 
      @media only screen and (max-width: #{$value}) { @content; } 
     } 
    } 

}