Front-end

[SCSS] for문 사용하기

유호야 2023. 4. 20. 21:54
반응형

비슷한 파일을 여러 개 입력해야 할 때, 하드코드 대신에 사용할 수 있는 for문을 scss에서 사용해보자

@for 를 이용해서 변수 $i를 선언하고 무슨 숫자부터 무슨 숫자까지 적용할 것인지 입력한다

생각보다 간단하지만 데이터가 1부터 100까지 있을 때 매우 유용할 부분이다!

반응형
@for $i from 1 through 3 {
  .slides:nth-child(#{$i}) {
    background-image: url("../assets/poland_w#{$i}.jpg");
  }
}

 

 

반응형

'Front-end' 카테고리의 다른 글

npm을 이용한 SCSS 설치  (0) 2023.06.04
Parcel-bundler 프로젝트 세팅  (0) 2023.04.16