SCSS: if 조건문, 반복문

조건문

if 함수

삼항연산자와 유사

 

if(조건, 참표현식1, 거짓표현식2)

 

// @if
@if (조건) {
/* 조건이 참일 때 구문 : 조건의 ()는 생략가능하다. */
}
 
// @if @else
@if (조건) {
/* 조건이 참일 때 구문 */
} @else {
/* 조건이 거짓일 때 구문 */
}

// @if @else if
@if (조건1) {
/* 조건1이 참일 때 구문 */
} @else if (조건2) {
/* 조건2가 참일 때 구문 */
} @else {
/* 모두 거짓일 때 구문 */
}

---

 

반복문

@for

스타일을 반복적으로 출력할 때

// through : 시작에서 종료까지 반복

// 종료 만큼 반복
@for $변수 from 시작 through 종료 {
// 반복 내용
}

// to: 시작에서 종료-1까지 반복
// 종료 직전까지 반복
@for $변수 from 시작 to 종료 {
// 반복 내용
}

 

 

@each

list와 map 데이터를 반복할때, for in 과 유사

@each $변수 in 데이터 {
// 반복 내용
}

 

 

@while

@while 조건 {
// 반복 내용
증감식;
}