sass 반복 처리를 사용한 클래스 부여 메모
컴파일 후 CSS
직장에서 궁극적으로 다음과 같은 CSS가 될 sass를 작성하고 싶습니다.
.class0-0 {
width: 0.0px;
}
.class0-1 {
width: 0.1px;
}
.class0-2 {
width: 0.2px;
}
.class0-3 {
width: 0.3px;
}
.class0-4 {
width: 0.4px;
}
.class0-5 {
width: 0.5px;
}
.class0-6 {
width: 0.6px;
}
.class0-7 {
width: 0.7px;
}
.class0-8 {
width: 0.8px;
}
.class0-9 {
width: 0.9px;
}
.class1-0 {
width: 1.0px;
}
.class1-1 {
width: 1.1px;
}
.class1-2 {
width: 1.2px;
}
.class1-3 {
width: 1.3px;
}
.class1-4 {
width: 1.4px;
}
.class1-5 {
width: 1.5px;
}
.class1-6 {
width: 1.6px;
}
.class1-7 {
width: 1.7px;
}
.class1-8 {
width: 1.8px;
}
.class1-9 {
width: 1.9px;
}
.class2-0 {
width: 2.0px;
}
.class2-1 {
width: 2.1px;
}
.class2-2 {
width: 2.2px;
}
.class2-3 {
width: 2.3px;
}
.class2-4 {
width: 2.4px;
}
.class2-5 {
width: 2.5px;
}
.class2-6 {
width: 2.6px;
}
.class2-7 {
width: 2.7px;
}
.class2-8 {
width: 2.8px;
}
.class2-9 {
width: 2.9px;
}
.class3-0 {
width: 3.0px;
}
.class3-1 {
width: 3.1px;
}
.class3-2 {
width: 3.2px;
}
.class3-3 {
width: 3.3px;
}
.class3-4 {
width: 3.4px;
}
.class3-5 {
width: 3.5px;
}
.class3-6 {
width: 3.6px;
}
.class3-7 {
width: 3.7px;
}
.class3-8 {
width: 3.8px;
}
.class3-9 {
width: 3.9px;
}
.class4-0 {
width: 4.0px;
}
.class4-1 {
width: 4.1px;
}
.class4-2 {
width: 4.2px;
}
.class4-3 {
width: 4.3px;
}
.class4-4 {
width: 4.4px;
}
.class4-5 {
width: 4.5px;
}
.class4-6 {
width: 4.6px;
}
.class4-7 {
width: 4.7px;
}
.class4-8 {
width: 4.8px;
}
.class4-9 {
width: 4.9px;
}
.class5-0 {
width: 5.0px;
}
.class0-0 {
width: 0.0px;
}
.class0-1 {
width: 0.1px;
}
.class0-2 {
width: 0.2px;
}
.class0-3 {
width: 0.3px;
}
.class0-4 {
width: 0.4px;
}
.class0-5 {
width: 0.5px;
}
.class0-6 {
width: 0.6px;
}
.class0-7 {
width: 0.7px;
}
.class0-8 {
width: 0.8px;
}
.class0-9 {
width: 0.9px;
}
.class1-0 {
width: 1.0px;
}
.class1-1 {
width: 1.1px;
}
.class1-2 {
width: 1.2px;
}
.class1-3 {
width: 1.3px;
}
.class1-4 {
width: 1.4px;
}
.class1-5 {
width: 1.5px;
}
.class1-6 {
width: 1.6px;
}
.class1-7 {
width: 1.7px;
}
.class1-8 {
width: 1.8px;
}
.class1-9 {
width: 1.9px;
}
.class2-0 {
width: 2.0px;
}
.class2-1 {
width: 2.1px;
}
.class2-2 {
width: 2.2px;
}
.class2-3 {
width: 2.3px;
}
.class2-4 {
width: 2.4px;
}
.class2-5 {
width: 2.5px;
}
.class2-6 {
width: 2.6px;
}
.class2-7 {
width: 2.7px;
}
.class2-8 {
width: 2.8px;
}
.class2-9 {
width: 2.9px;
}
.class3-0 {
width: 3.0px;
}
.class3-1 {
width: 3.1px;
}
.class3-2 {
width: 3.2px;
}
.class3-3 {
width: 3.3px;
}
.class3-4 {
width: 3.4px;
}
.class3-5 {
width: 3.5px;
}
.class3-6 {
width: 3.6px;
}
.class3-7 {
width: 3.7px;
}
.class3-8 {
width: 3.8px;
}
.class3-9 {
width: 3.9px;
}
.class4-0 {
width: 4.0px;
}
.class4-1 {
width: 4.1px;
}
.class4-2 {
width: 4.2px;
}
.class4-3 {
width: 4.3px;
}
.class4-4 {
width: 4.4px;
}
.class4-5 {
width: 4.5px;
}
.class4-6 {
width: 4.6px;
}
.class4-7 {
width: 4.7px;
}
.class4-8 {
width: 4.8px;
}
.class4-9 {
width: 4.9px;
}
.class5-0 {
width: 5.0px;
}
이것을 51회 반복하고 싶습니다. 자, 어떻게 쓰겠습니까? 선배의 코드가 공부가 되었으므로, 기록해 두려고 생각했습니다.
결론
시작하기 전에 sass에서 씁니다.
@for $i from 0 through 50 {
$v1: floor($i / 10);
$v2: $i % 10;
.class#{$v1}-#{$v2} {
width: #{$v1 + "." + $v2}px;
}
}
$v1의 행 설명
$v1
오는 것은,
@for $i from 0 through 50 {
$v1: floor($i / 10);
$v2: $i % 10;
.class#{$v1}-#{$v2} {
width: #{$v1 + "." + $v2}px;
}
}
의 51회 반복이 가능하면 OK입니다.
$v1: floor($i / 10);
floor
는 소수점 이하를 줄입니다. 반올림이 아닌 절하이므로 0.9에서도 0으로 합니다.... 생략
그래서 0이 10회를 실현하고 있습니다. 첫 번째,
@for $i from 0 through 50
에서 51번 반복하는 것으로 하고 있기 때문에, 5는 1회만의 실행으로 끝납니다(51회째의 실행이므로).$v2 행 설명
$v2
오는 것은,... 생략
... 생략
라는 느낌으로, (0,1,2,3...9)가 51회 반복됩니다.
0 % 10 = 0
)이므로, 결과는 0 50 % 10 = 0
)이므로 결과는 0 라는 느낌이 듭니다.
시도하고 싶은 분에게
여기서 sass를 실시간으로 컴파일하기 때문에
@for $i from 0 through 50 {
$v1: floor($i / 10);
$v2: $i % 10;
.class#{$v1}-#{$v2} {
width: #{$v1 + "." + $v2}px;
comment: #{$i + 1}回目 // これは分かりやすくするためのコメントです
}
}
6행째는, 실제로 css로서 컴파일할 때는 지워 둡시다. 이번은, 몇번째인가를 하기 위해서 붙였을 뿐입니다.
실제 이미지↓
이상입니다!
참고
@for $i from 0 through 50 {
$v1: floor($i / 10);
$v2: $i % 10;
.class#{$v1}-#{$v2} {
width: #{$v1 + "." + $v2}px;
comment: #{$i + 1}回目 // これは分かりやすくするためのコメントです
}
}
Reference
이 문제에 관하여(sass 반복 처리를 사용한 클래스 부여 메모), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/ryosuketter/items/93080a2ed03fe74c084f텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)