230129 SCSS: for문 사용하기

✍️✍️✍️ 위 글은 작성자의 지식습득에 따라 추후 퇴고 될 수 있음을 알려드립니다(피드백 환영).

 

 

---

CSS 전처리도구인 SCSS.

지난번 재활용편에 이어 두번째 SCSS관련 글을 기록하고자 한다.

 

230126 SCSS: @mixin, @include '재활용'편

 

css 관련 기능에는 for문을 사용한다고 전혀 생각하지 못했다.

for문은 화면을 꾸미는 것엔 사용하지 못한다고 생각했기 때문이다.

이것이... 지식의 범위와 시선이 좁으면 만나는 한계인듯 싶다.

---

for문의 구성 방식은 for(초기화; 조건; 증감){} 으로 구성된다

 

230114 JS: 숙달을 위한 메모 - Statement(~문) 편

 

예시1.

아래 사진을 보면 실제 JS에서 사용하는 for문을 scss에서 적용할 수 있다.

모양은 살짝 다르지만 원리는 같다.

scss for문 사용 예시 1

 

SCSS의 for문은 @for 초기화 from 조건 through{}로 좀 더 간결화 되었고

@가 추가 되었으며, 소괄호가 없다는 것에 차이 점이 있지만,

기능적인 면으로만 봤을 때, 반복기능을 할 수 있다는 면에선 같다.

 

그래서 왼쪽의 내용을 클래스명을 box로 가진 어떤 요소를

100px의 너비로 구현해달라는 10번 반복 코드가, 오른 쪽의 CSS로 반복한 내용과 같다.

참고로 여기서 반복문이 사용 될 때는 zero base는 해당되지 않는다. 

무조건 1부터 작성!

 

 

예시2.

scss for문 사용 예시 2

두번 째 예시는 과정은 첫번 째 예시와 같지만 추가 요소와 출력결과가 다르다.

우선 예시 1의 코드와 비교해 이야기해 보자면 아까와 똑같이 class 이름이 box라는 것을 열번 불러 오는데, 

 

대신, css에서 마찬가지로 사용하는 :nth-child()메소드를 사용해서, 소괄호 안에 1부터 10까지 넣어주고,

너비는 100px에 nth-child()에 들어가는 숫자를 곱한 너비를 출력해 점점 더 큰 너비 px이 결과값으로 나온 것이

오른쪽  css 결과이다.

 

---

 

저렇게 반복해서 작성해야하는 것이

왼쪽의 scss에 for문을 사용해 단 6줄만에 끝날 수 있는 것이다....!!!

이 얼마나.. 인간은 게으르고 그만큼 노오력하는 기술을 만들어 내는 것인지...!!

 

scss마스터 하고싶다는 욕심이 많아진다...!! 화아아이팅!

다음에 적용할 상황이생기면 무조건 for문 사용해보기!!