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

희망)

편집 : @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; } 
     } 
    } 

}