동적으로 클래스 이름을 생성하고 CSS는 말에 절반을 추가, 반으로 SCSS 말대꾸 버전 3</p> <p>나눌 만약에 반복자 조건부 검사와 내가 동적으로 매우 구체적인 클래스 이름을 생성 할 말대꾸

Question

의 속성 및 속성. 접미사 0.25 경우에만, '3 분기'와 '분기' 접미사 0.75의 경우, 접미사 접미사는

예 :

// margin classes 
// classes m-a-0 to m-a-5, 1/4 rems specified by 1q, half, 3q 
// // m-a-1q is 1/4 rem, m-a-1-1q is i.25rem 

.m- { 
    &a-0 { 
     margin: 1rem * 0; 
    } 
    &a-1q { 
     margin: 1rem * 0.25; 
    } 
    &a-half { 
     margin: 1rem * 0.5; 
    } 
    &a-3q { 
     margin: 1rem * 0.75; 
    } 
    &a-1 { 
     margin: 1rem * 1; 
    } 
    &a-1-1q { 
     margin: 1rem; 
    } 
    &a-1half { 
     margin: 1rem * 1.5; 
    } 
    &a-1-3q { 
     margin: 1rem * 1.75; 
    } 
    &a-2 { 
     margin: 1rem * 2; 
    } 
    &a-2-1q { 
     margin: 1rem * 2.25; 
    } 
    &a-2half { 
     margin: 1rem * 2.5; 
    } 
    &a-2-3q { 
     margin: 1rem * 2.75; 
    } 
} 

는 생성해야합니다 :

.m-a-0{margin:0rem}.m-a-1q{margin:0.25rem}.m-a-half{margin:0.5rem}.m-a-3q{margin:0.75rem}.m-a-1{margin:1rem} ... 

Answer 1

이 있을지 다음과 같이 약간의 이름 변경을 허용하십시오.

$count: 2; 
@for $i from 0 through $count * 4 { 
    .m-a-#{ floor($i/4) }#{ nth(null -1q -half -3q, $i % 4 + 1) } { 
    margin: $i/4 * 1rem; 
    } 
} 

// output 
.m-a-0  { margin: 0rem; } 
.m-a-0-1q { margin: 0.25rem; } 
.m-a-0-half { margin: 0.5rem; } 
.m-a-0-3q { margin: 0.75rem; } 
.m-a-1  { margin: 1rem; } 
.m-a-1-1q { margin: 1.25rem; } 
.m-a-1-half { margin: 1.5rem; } 
.m-a-1-3q { margin: 1.75rem; } 
.m-a-2  { margin: 2rem; }