[SCSS] 기본 문법

1. #{} (템플릿 리터럴)

• #{}는 자바스크립트의 템플릿 리터럴처럼 변수를 중괄호 {} 안에 넣으면 변수값을 string 타입으로 사용할 수 있다.

$WHITE: FFFFFF;

h1 {
  color: #{$WHITE};
}

2. @Mixins (재활용)

• 재사용할 CSS 스타일 정의
• @mixin을 통해 스타일을 선언하고, @include를 통해 사용

/* 선언 - mixin을 통해 폰트 스타일 지정 */
@mixin lg-text {
  font: {
    size: 24px;
    weight: bold;
  }
}

/* 사용 - @include */
h1 {
  @include lg-text;
}

3. @Function (함수)

• 함수를 정의하여 사용
• @mixin과 비슷하긴 하지만 반환값에 차이가 있다.
  • @mixin : 지정된 스타일 반환
  • @function : 계산된 특정 값을 @return 지시어 통해 반환

/** 단위 제거하는 함수 */
@function remove-unit($value) {
  @return ($value / ($value * 0 + 1));
}

4. @for (반복문)

• 스타일을 반복적으로 출력
• 자바스크립트의 for문과 유사
• through와 to에 따라서 종료 조건이 다르다.
  • from a through b : a부터 b까지 반복 (b포함)
  • from a to b : a부터 b 직전까지 반복 (b미포함)

/** through - 1부터 3까지 반복 (3번 반복) */
@for $i from 1 through 3 {
  .through:nth-child(#{$i}) {
    width: 20px * $i;
  }
}

/** to - 1부터 3 직전까지 반복 (2번 반복) */
@for $i from 1 to 3 {
  .to:nth-child(#{$i}) {
    width: 20px * $i;
  }
}

/* 실제 CSS */
.through:nth-child(1) {
  width: 20px;
}

.through:nth-child(2) {
  width: 40px;
}

.through:nth-child(3) {
  width: 60px;
}

.to:nth-child(1) {
  width: 20px;
}

.to:nth-child(2) {
  width: 40px;
}

5. @each (반복문)

• List 또는 Map 데이터를 반복할 때 사용
• 자바스크립트의 for-in문 / for-of문과 유사

// List
@each $type in ('red', 'orange', 'yellow', 'green') {
  .#{$type} {
    color: var(--#{$type});
  }
}

// Map ($header: key, $size: value)
@each $header, $size in (h1: '32px', h2: '28px', h3: '24px') {
  #{$header} {
    font-size: $size;
  }
}

/* 실제 CSS */
.red { color: var(--red); }
.orange { color: var(--orange); }
.yellow { color: var(--yellow); }
.green { color: var(--green); }

h1 { font-size: 32px; }
h2 { font-size: 28px; }
h3 { font-size: 24px; }

6. @extend (상속)

• 특정 클래스%를 상속할 때 사용

/* box 클래스 */
%box {
  padding: 20px;
  border: 1px solid #333333;
}

.header {
  @extend %box;
  background-color: #ffffff;
}

.footer {
  @extend %box;
  background-color: #aaaaaa;
}

/* 실제 CSS */
.header {
  padding: 20px;
  border: 1px solid #333333;
  background-color: #ffffff;
}

.footer {
  padding: 20px;
  border: 1px solid #333333;
  background-color: #aaaaaa;
}

📌 @extend를 사용하면 가독성이 떨어지고 중첩 선택자와 함께 사용하면 예외 상황이 발생하므로 사용하지 않음.

7. if

• if (조건식) : 조건식이 참이면 블록문 실행, 거짓이면 블록을 실행 X
• if (조건식, 표현식1, 표현식2) : 조건식이 참이면 표현식1을, 거짓이면 표현식2를 반환

$section1: 900px;
$section2: 500px;

/* if(조건식) */
if($section1 > 700) {
  background-color: #FFFFFF;
}

/* if(조건식, 표현식1, 표현식2) */
.section2 {
  background-color: if ($section2 > 500, red, white);
}

/* 실제 CSS */
.section1 {
  background-color: #FFFFFF;
}

.section2 {
  background-color: white;
}