[SCSS] SCSS란?

📌 SCSS란? 

- CSS를 더 편리하게 사용하기 위한 확장 문법

- 변수, 중첩, 연산, 함수, 코드 재사용 같은 강력한 기능 제공

- CSS로 변환(컴파일)된 후 브라우저에서 사용됨

- React나 Vue 같은 프레임워크에서 자주 사용

- SCSS가 기존 CSS와 호환성이 좋아서 대부분 SCSS 사용

 

* Sass(Syntactically Awesome Stylesheets)의 한 문법이며, 
CSS를 더 편리하게 작성할 수 있도록 도와주는 스타일 전처리기(Preprocessor)이다.
SCSS(Sassy CSS)는 CSS와 문법이 거의 같으면서도 추가 기능이 많은 스타일 문법

 

* Sass

- 들여쓰기 기반, {}와 ; 필요 없음 (옛날 문법)

- 요즘엔 거의 SCSS로 사용

 

 

✔ SCSS 예제

// 변수 사용
$primary-color: #3498db;

// 중첩(Nesting)
.navbar {
  background-color: $primary-color;

  .nav-item {
    color: white;
    &:hover {
      color: yellow;
    }
  }
}

 

✔ Sass 예제

$color: red
.button
  color: $color

 

CSS와 SCSS의 차이점

비교 항목	CSS	SCSS (Sass)
문법	{}와 ; 필수	CSS와 유사한 문법
변수 사용	❌	⭕ ($color: red;)
중첩(Nesting)	❌	⭕ (.parent { .child { ... } })
연산(계산)	❌	⭕ (width: 100% - 20px;)
함수(내장 기능)	❌	⭕ (lighten(), darken())
코드 재사용	❌	⭕ (@mixin, @extend)