요소 + 요소와 유사한 SCSS 루프를 만드는 방법 : nth-child (n) 의사 선택기?

Question

현재 1에서 n까지 반복되고 그 요소에 특정한 속성을 적용하는 SCSS 코드가 있습니다.

@for $i from 1 through 6 { 
.element:nth-child(#{$i}n) { 
    position:absolute; 
    left:10*$i; 
    top:5*$i; 
    } 
} 

그러나, 내가 목표로하고있어 일부 브라우저는 n 번째 자식 사이비 요소를 지원하지 않는 것을 발견 : 그것은 다음과 같이 보입니다. 따라서 요소 + 요소 선택기를 사용하고 싶습니다.

구형 브라우저가 이해할 수있는 위의 샘플 코드와 동일한 효과를 얻으려면 어떻게해야합니까? 감사.

Answer 1

Demo on sassmeister. SCSS 코드

$selector-name: '.element'; 
$selector: $selector-name; 

@for $i from 1 through 6 { 
    #{$selector} { 
    position: absolute; 
    left: 10 * $i; 
    top: 5 * $i; 
    } 

    $selector: $selector + ' + ' + $selector-name; 
} 

는 left 및 right 특성에 픽셀을 추가하는 것을 잊지 마십시오

.element { 
    position: absolute; 
    left: 10; 
    top: 5; 
} 

.element + .element { 
    position: absolute; 
    left: 20; 
    top: 10; 
} 

.element + .element + .element { 
    position: absolute; 
    left: 30; 
    top: 15; 
} 

.element + .element + .element + .element { 
    position: absolute; 
    left: 40; 
    top: 20; 
} 

.element + .element + .element + .element + .element { 
    position: absolute; 
    left: 50; 
    top: 25; 
} 

.element + .element + .element + .element + .element + .element { 
    position: absolute; 
    left: 60; 
    top: 30; 
} 

로 컴파일합니다.