@forと@eachでSassでグリッド列クラスを生成する

Question

私が取り組んでいるWebサイトの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

[OK]をので、私はミスを犯し、実際には、私が実際に必要としていたことは次の出力だったので、あまり先に考えていなかった。

.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%; } 
    ... 
} 

そして、私はthroughtことを達成次のコード：これはまた、他の誰かに役立つことができ

$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; }; 
    }; 
    }; 
    } 
} 

希望;）

編集：@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; } 
     } 
    } 

}