속성에서 sass for 루프를 모방하려면 어떻게해야합니까?

Question

나는 단순화하기 위해 내가 싫어할만큼 반복적 인 CSS를 가지고있다. 본질적으로 나는 레벨에 기반한 배경 줄무늬가있는 일련의 항목을 가지고 있습니다. 이 줄무늬를 만들기 위해 배경 그라디언트를 사용하고 있습니다. 내 배경 이미지 속성 내에서 for 루프를 사용하려고했지만 외관상으로는 허용 할만한 웅덩이가 아닙니다. 이것은 내가하려고하는 것의 아주 단순한 예입니다.

루프 제한 때문에 어떻게 해결할 수 있습니까?

.master { 
    @for $i from 1 through 10 { 

    .item-#{$i} { 
     background-image: 
      @for $j from 1 through $1 { 
       linear-gradient(90deg, red 7px, #fff 1px), 
      } 
      linear-gradient(#fff 1px, rgba(255, 255, 255,.0) 1px); 
      } 
    } 
} 

원하는 결과 :

.master .item-1 { 
    background-image: 
     linear-gradient(90deg, red 7px, #fff 1px), 
     linear-gradient(#fff 1px, rgba(255, 255, 255,.0) 1px); 
} 

.master .item-2 { 
    background-image: 
     linear-gradient(90deg, red 7px, #fff 1px), 
     linear-gradient(90deg, red 7px, #fff 1px), 
     linear-gradient(#fff 1px, rgba(255, 255, 255,.0) 1px); 
} 

.master .item-3 { 
    background-image: 
     linear-gradient(90deg, red 7px, #fff 1px), 
     linear-gradient(90deg, red 7px, #fff 1px), 
     linear-gradient(90deg, red 7px, #fff 1px), 
     linear-gradient(#fff 1px, rgba(255, 255, 255,.0) 1px); 
} 

etc... 

.master .item-10 { 
    background-image: 
     linear-gradient(90deg, red 7px, #fff 1px), 
     linear-gradient(90deg, red 7px, #fff 1px), 
     linear-gradient(90deg, red 7px, #fff 1px), 
     linear-gradient(90deg, red 7px, #fff 1px), 
     linear-gradient(90deg, red 7px, #fff 1px), 
     linear-gradient(90deg, red 7px, #fff 1px), 
     linear-gradient(90deg, red 7px, #fff 1px), 
     linear-gradient(90deg, red 7px, #fff 1px), 
     linear-gradient(90deg, red 7px, #fff 1px), 
     linear-gradient(90deg, red 7px, #fff 1px), 
     linear-gradient(#fff 1px, rgba(255, 255, 255,.0) 1px); 
} 

Answer 1

이 * 출력 * 원하는 무엇

.master { 
    @for $i from 1 through 10 { 

    $lg : ""; 
    @for $j from 1 through $i { 
     $lg : $lg + "linear-gradient(90deg, red 7px, #fff 1px), "; 
    } 

    .item-#{$i} { 
     background-image: #{$lg}linear-gradient(#fff 1px, rgba(255,255,255,.0) 1px); 
    } 
    } 
} 

당신은 sassmeister