[SCSS] SCSS 2 / SCSS 기본 문법 (변수, 중첩, 선택자, ., &, @extend)

변수 (Variables)

• 변수명 앞에 $를 붙임
• 변수의 장점: 일괄 변경 용이, 코드 일관성 유지.
• 단, 변수는 선언 후 사용 가능. 선언 전 사용하면 오류.

$primary-color: #3498db; // 변수 선언
$font-size-base: 16px;

body {
  color: $primary-color;
  font-size: $font-size-base;
}

---

중첩 (Nesting)

• CSS 선택자를 중첩해서 가독성을 높이고 코드량을 줄일 수 있음
• . 또는 # 선택자를 중첩해서 부모-자식 관계를 표현.
• 중첩은 가급적 3~4단계 이하로 제한하는 것이 유지보수에 좋음

.nav {
  background: #fff;

  ul {
    list-style: none;
  }
}

---

& 연산자 (Parent Selector Reference)

• 중첩에서 부모 선택자를 참조할 때 &를 사용
• &는 현재 선택자를 의미

.button {
  color: white;
  &:hover {
    color: red;
  }
}

---

부분 선택자(Extend/Inheritance)

• 중복 스타일을 줄일 때 @extend 사용
• %로 placeholder 선언.
• 다른 클래스에서 @extend로 상속 가능.
• CSS 출력 시 공통 스타일을 합쳐서 중복 제거

%button-base {
  padding: 10px 20px;
  border-radius: 5px;
}

.button {
  @extend %button-base;
  background: blue;
}

.button-secondary {
  @extend %button-base;
  background: gray;
}

---

주석

1. 한 줄 주석 (//)

• 컴파일 시 CSS에 포함되지 않음.
• 개발용 주석으로 사용.

// 한줄 주석

2. 여러 줄 주석 (/* */)

• 컴파일 후 CSS에도 주석이 남음.
• 배포용 CSS에 남기고 싶은 주석일 때 사용

/* 
여러 줄 주석 가능
이 주석은 CSS에도 포함됨
*/