[CSS] CSS, SCSS, 그리고 SASS: 스타일링의 진화 ✨

CSS, SCSS, SASS 톺아보기! ✨

웹 개발에서 CSS는 스타일링의 기본이죠. 하지만 프로젝트가 복잡해질수록 단순한 CSS만으로는 유지보수가 어려워지는 경우가 많습니다. 이때 등장한 SASS와 SCSS는 CSS의 한계를 극복하고, 개발자들에게 더 강력한 도구를 제공해 주었어요. 오늘은 CSS와 SCSS, SASS의 차이와 각각의 특징, 활용법을 자세히 다뤄볼게요!

---

1. CSS란? 🎨

CSS (Cascading Style Sheets)

CSS는 웹 문서의 스타일을 지정하는 언어예요. HTML 문서의 레이아웃, 색상, 글꼴, 간격 등을 정의할 수 있죠.

 

CSS의 주요 특징

• 간단한 문법: HTML 요소에 스타일을 적용
• 선언적 스타일링: 요소의 스타일을 선언적으로 정의
• 계층 구조: 스타일이 계층적으로 적용되어 상속과 우선순위를 결정

간단한 예제

<style>
  h1 {
    color: blue;
    font-size: 24px;
  }
</style>
<h1>Hello, CSS!</h1>

 

CSS의 한계

• 반복적인 코드: 변수나 재사용 가능한 로직이 부족해서 비슷한 스타일을 반복 작성
• 복잡한 구조 관리: 프로젝트가 커질수록 클래스와 ID 관리가 어려워짐
• 유연성 부족: 조건부 스타일링이나 계산 로직 처리 불가

---

2. SASS와 SCSS: CSS의 업그레이드 🔧

SASS(Syntactically Awesome Stylesheet)

SASS는 CSS를 더욱 강력하게 만들어주는 CSS 전처리기입니다. 변수, 중첩(Nesting), 믹스인(Mixins), 조건문, 반복문 등 프로그래밍적 접근을 가능하게 해줘요.

 

SCSS (Sassy CSS)

SCSS는 SASS의 CSS 친화적 문법입니다. CSS 문법과 거의 동일해서 기존 CSS를 쉽게 확장할 수 있어요.

특징	SASS	SCSS
문법	들여쓰기 기반	중괄호와 세미콜론 사용
파일 확장자	.sass	.scss
CSS 호환성	기존 CSS와 호환되지 않음	기존 CSS와 100% 호환

---

3. 주요 기능 비교 ✨

1. 변수 (Variables)

CSS에는 없는 변수 개념이 추가되어, 값을 재사용하거나 쉽게 변경할 수 있어요.

 

SCSS 예제

$primary-color: #3498db;
$font-stack: 'Arial', sans-serif;

body {
  color: $primary-color;
  font-family: $font-stack;
}

 

2. 중첩 (Nesting)

SASS와 SCSS에서는 선택자를 계층적으로 작성할 수 있어, CSS보다 코드가 깔끔해져요.

 

SCSS 예제

nav {
  ul {
    list-style: none;
    li {
      display: inline-block;
      a {
        text-decoration: none;
      }
    }
  }
}

 

3. 믹스인 (Mixins)

재사용 가능한 스타일 블록을 정의할 수 있습니다.

 

SCSS 예제

@mixin button($bg-color) {
  background-color: $bg-color;
  border: none;
  color: white;
  padding: 10px;
}

.button-primary {
  @include button(#3498db);
}

.button-secondary {
  @include button(#2ecc71);
}

 

4. 조건문 & 반복문

스타일에서 프로그래밍적인 로직을 작성할 수 있어요.

 

SCSS 예제: 조건문

$theme: dark;

body {
  background-color: if($theme == dark, black, white);
  color: if($theme == dark, white, black);
}

 

SCSS 예제: 반복문

@for $i from 1 through 5 {
  .col-#{$i} {
    width: 20% * $i;
  }
}

 

5. 임포트 (Import)

CSS의 @import는 여러 파일을 합칠 때 성능 문제가 있지만, SASS/SCSS의 @use와 @import는 빌드 타임에 병합되어 성능이 훨씬 좋아요.

@import 'reset';
@import 'buttons';

---

4. SCSS/SASS를 사용하는 이유 🌟

1. 코드 재사용성 증가: 변수와 믹스인으로 스타일 재사용 가능
2. 유지보수 용이: 중첩과 모듈화를 통해 코드 구조를 체계적으로 관리
3. 생산성 향상: 반복 작업을 줄이고 생산성을 높임
4. CSS로 컴파일 가능: 최종적으로 CSS로 변환되어 브라우저에서 실행

---

5. SCSS/SASS 설치 및 사용법 ⚙️

설치하기

SASS는 Node.js 환경에서 설치하여 사용할 수 있어요.

npm install -g sass

 

컴파일하기

SASS/SCSS 파일을 CSS로 변환합니다.

sass style.scss style.css

 

---

6. 실무에서 SCSS/SASS 활용하기 💼

1. 프로젝트 구조화

SCSS 파일을 컴포넌트 단위로 나눠 관리하면 유지보수가 쉬워요.

styles/
  _variables.scss
  _mixins.scss
  components/
    _header.scss
    _footer.scss
  main.scss

 

main.scss

@import 'variables';
@import 'mixins';
@import 'components/header';
@import 'components/footer';

 

2. CSS 프레임워크 확장

SCSS는 기존 CSS 프레임워크를 커스터마이징할 때 유용합니다. 예를 들어, Bootstrap의 SCSS 파일을 수정해 프로젝트에 맞는 스타일을 적용할 수 있어요.

---

7. CSS-in-JS와 SCSS 비교 👨‍💻

최근에는 Styled-components, Emotion 같은 CSS-in-JS 방식도 많이 사용돼요. SCSS와의 차이를 알아볼까요?

특징	SCSS	CSS-in-JS
사용 방식	파일 분리, SCSS 파일 작성	컴포넌트 내부에서 스타일 정의
런타임 비용	없음 (CSS로 컴파일됨)	런타임에 스타일 생성
재사용성	변수와 믹스인으로 가능	props와 동적 스타일 지원

---

8. CSS, SCSS, SASS의 선택 기준 🔍

CSS

• 프로젝트가 단순하거나, 팀원이 CSS에만 익숙할 때

SCSS

• 큰 규모의 프로젝트에서 체계적인 스타일 관리가 필요할 때
• CSS와 호환성을 유지하며 확장성을 더하고 싶을 때

SASS

• CSS 문법에 얽매이지 않고 더 간결한 스타일링을 원할 때

---

결론: 당신의 스타일, 더 깔끔하고 강력하게! 💪

SCSS와 SASS는 CSS의 단점을 보완하고 스타일링을 한 단계 업그레이드해줍니다. 프로젝트의 규모나 스타일 관리 요구 사항에 따라 CSS, SCSS, SASS 중 적합한 도구를 선택해 보세요.

 

🌷전설의 개발자가 되어봅시당! 🌷