SCSS를 정리하면서 - 조건과 반복

if 조건문 사용법

- 아래와 같이 흑백 테마의  기능을 만들 수도 있다.

-else if문도 사용이 가능하다.

-위 기능은 요소의 너비와 높이를 0으로 만들어서 요소에는 border만 남게한다.

-그럼 아래와 같이 삼각형 4개로 boreder부분이 형성된다.

- 이때 border의 한 부분만 색칠하게 되면 삼각형이 나오는 것이다.

 

 

반복문

 

@each ... in구문

 

-.List와 Map을 반복하는 예제다.

- $sizes는 List

- $fruits는 Map

List

- for...of문과 유사하다.

- List는 List모듈의 list.index를 사용한다.(index값을 추출한다.) -> 숫자가 나온다 (1, 2, 3 ...)

- 보간을 통해서 클래스를 추가한다.

Map

- @each 키, 값 in 객체 형태로 사용한다.

- 위 처럼 보간을 사용해 클래스를 추가 가능하다.

 

 

@for...from...through 문

 

-자바스크립트의 for문과 비슷하지만 조건이 다르다.

- from 1 through 3는 1부터 3까지 반복, 즉 3번 반복한다는 뜻이다.

- 이때 $i의 값은 초기값이 1이고, 3까지 반복한다.

- 즉 아래와 같다.

for(let i = 1; i <= 3; i++)

 

@for...from...to 문

 

- 위 구문은 아래와 같다.

- 즉, 1 부터 2까지만 반복한다.

for(let i = 1; i < 3; i++)

 

@while문

- 기존 자바스크립트의 while문과 비슷하다.

- 소괄호를 없애도 가능하다.