//scss 반복문
//for(let i=0; i<10; i+=1){
// console.log(`loop-${i}`)}
@for $i from 1 through 10{
/*자바스크립트 보간법`{$A}`과 유사*/
/*차이점은 $1이 제로베이스가 아님*/
.box:nth-child(#{$i}){
width:100px*$i;
}
}
//css
/*자바스크립트 보간법`{$A}`과 유사*/
/*차이점은 $1이 제로베이스가 아님*/
.box:nth-child(1) {
width: 100px;
}
/*자바스크립트 보간법`{$A}`과 유사*/
/*차이점은 $1이 제로베이스가 아님*/
.box:nth-child(2) {
width: 200px;
}
/*자바스크립트 보간법`{$A}`과 유사*/
/*차이점은 $1이 제로베이스가 아님*/
.box:nth-child(3) {
width: 300px;
}
/*자바스크립트 보간법`{$A}`과 유사*/
/*차이점은 $1이 제로베이스가 아님*/
.box:nth-child(4) {
width: 400px;
}
/*자바스크립트 보간법`{$A}`과 유사*/
/*차이점은 $1이 제로베이스가 아님*/
.box:nth-child(5) {
width: 500px;
}
/*자바스크립트 보간법`{$A}`과 유사*/
/*차이점은 $1이 제로베이스가 아님*/
.box:nth-child(6) {
width: 600px;
}
/*자바스크립트 보간법`{$A}`과 유사*/
/*차이점은 $1이 제로베이스가 아님*/
.box:nth-child(7) {
width: 700px;
}
/*자바스크립트 보간법`{$A}`과 유사*/
/*차이점은 $1이 제로베이스가 아님*/
.box:nth-child(8) {
width: 800px;
}
/*자바스크립트 보간법`{$A}`과 유사*/
/*차이점은 $1이 제로베이스가 아님*/
.box:nth-child(9) {
width: 900px;
}
/*자바스크립트 보간법`{$A}`과 유사*/
/*차이점은 $1이 제로베이스가 아님*/
.box:nth-child(10) {
width: 1000px;
}
'프론트엔드 공부 > scss' 카테고리의 다른 글
scss 컬러내장함수 (0) | 2021.05.28 |
---|---|
scss @function(){} (0) | 2021.05.28 |
scss @mixin의 재활용(초깃값 설정과 키워드인수설정) / @content 추가기능 (0) | 2021.05.28 |
scss 산술연산자 (0) | 2021.05.28 |
scss 변수 유효범위 (0) | 2021.05.27 |