SASS에서 패딩 증가시키기

Question

패딩을 10px 씩 증가 시키도록 children 엘리먼트를 갖고 싶습니다.

$lpad: 10px; 
$i: 1; 

@for $i through 20 { 
    .myEm:nth-child($i) { 
     padding-left: $lpad * $i;    
    } 
    $i: $i + 1; 
} 

잘 보이지만 작동하지 않습니다

나는 다음과 같은 시도했습니다. 내가 뭘 놓치고 있니?

Answer 1

이것은 루프가 아닙니다. 비록 이것이 그렇다고하더라도, 이것은 CSS가 작동하는 방식이 아닙니다. 당신의 요소가 중첩 된 경우

당신이 뭔가를 할 수 있습니다

.el { 
    padding-left: 10px; 
    > .el { 
    padding-left: 20px; 
    } 
} 

당신의 요소가 형제 인 경우 :

@for $i from 1 through 20 { 
    .simLvl:nth-child(#{$i}) { 
    margin-left: $lpad * $i; 
    } 
}