[CSS/SCSS] CSS 놔두고 왜 SCSS를 사용하는 이유는?

❓🤔 CSS 놔두고 왜 SCSS를 사용할까?
👉 편의성과 기능적인 확장성 때문에 사용한다고 할 수 있다.

SCSS는 CSS와 호환되면서 더 많은 기능을 제공한다. 작고 간단한 프로젝트라면 CSS만으로도 충분하지만, 대규모 프로젝트 또는 팀 프로젝트나 복잡한 스타일 로직이 있다면 SCSS를 사용하면 좋다.

① 중첩
SCSS에서는 CSS 선택자를 중첩 작성 가능해서 계층 구조를 더 직관적으로 표현할 수 있음.

• scss

.todo-list {
  background-color: #f4f4f4;
  padding: 20px;

  .todo-item {
    margin-bottom: 10px;
    font-size: 16px;
  }
}

• css

.todo-list {
  background-color: #f4f4f4;
  padding: 20px;
}
.todo-list .todo-item {
  margin-bottom: 10px;
  font-size: 16px;
}

② 변수
CSS에서는 변수 사용 불가하지만, SCSS에서는 변수($)를 사용해 스타일 값(색상, 폰트 크기, 간격 등) 재사용 할 수 있음. 변수의 사용으로 효율적이고 일관된 코드를 유지할 수 있음.

• scss

$primary-color: #3498db;

.button {
  background-color: $primary-color;
  border-radius: 5px;
}

③ 믹스인
재사용 가능한 코드 블록을 만들 수 있음. 반복적으로 사용되는 스타일을 믹스인으로 정의하고, 필요한 곳에 호출하면 코드 중복은 피하고, 더 유연한 스타일을 만들 수 있게 됨.

• scss

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  border-radius: $radius;
}

.box { 
  @include border-radius(10px); 
}

④ 확장
@extend를 사용해 다른 클래스를 상속할 수 있음. 공통 스타일을 여러 클래스에 적용할 때 유용함.

• scss

.base-btn {
  padding: 10px 20px;
  border-radius: 5px;
  border: none;
}

.primary-btn {
  @extend .base-btn;
  background-color: #3498db;
  color: white;
}

⑤ 그 외
수학적 연산, 조건문(@if, @else), 반복문(@for, @each, @while)을 지원함

• scss

// 수학적 연산
$width: 100px;
$height: $width / 2;

.box {
  width: $width;
  height: $height;
}

// 조건문과 반복문
$themes: (light, dark);

@each $theme in $themes {
  .#{$theme}-theme {
    background-color: if($theme == light, #fff, #333);
  }
}