SCSS 무엇인가?

SCSS(Sassy CSS)는 CSS의 확장 문법을 제공하는 스타일시트 언어인 Sass(Syntactically Awesome Style Sheets)의 “.scss” 문법을 가리킵니다. 한마디로, 기존 CSS 문법을 그대로 쓰되 그 위에 변수, 중첩, 믹스인, 함수, 상속 같은 프로그래밍적 기능을 추가해 줍니다.

주요 특징

변수(Variables)

$primary-color: #3498db;
body {
  background-color: $primary-color;
}

반복해서 쓰는 색상·폰트·숫자 값을 변수로 선언해 관리할 수 있어요.

중첩(Nesting)

.nav {
  ul {
    margin: 0;
    li {
      display: inline-block;
    }
  }
}

CSS 셀렉터 계층을 직관적으로 표현해 주므로, 코드가 훨씬 깔끔해집니다.

믹스인(Mixins) & 함수(Functions)

@mixin border-radius($r) {
  -webkit-border-radius: $r;
  -moz-border-radius: $r;
  border-radius: $r;
}
.btn {
  @include border-radius(4px);
}

반복되는 스타일 블록을 재사용하거나, 복잡한 로직을 함수처럼 처리할 수 있어요.

상속(Extend/Inherit)

.message {
  padding: 10px;
  border: 1px solid #ccc;
}
.success {
  @extend .message;
  border-color: green;
}

기본 스타일을 물려받아, 부분만 덮어쓸 수 있습니다.

분할 관리(Partials & Import)

파일을 _variables.scss, _mixins.scss, _buttons.scss 등으로 나눈 뒤

// styles.scss
@import 'variables';
@import 'mixins';
@import 'buttons';

SCSS 사용 흐름

.scss 파일을 작성
Sass 컴파일러(예: Dart Sass, node-sass)로 sass styles.scss styles.css 실행
생성된 styles.css를 HTML에 링크

Webpack, Gulp, Parcel 같은 빌드 도구나 Next.js, CRA(Create React App) 등의 환경에서도 로더(loader) 설정만 해 주면 자동으로 SCSS를 처리해 줍니다.

SCSS는 “더 강력한” CSS로, 변수·중첩·믹스인 등으로 스타일 코드의 재사용성, 유지보수성, 가독성을 크게 높여 줍니다. 기존 CSS에 익숙하다면 .scss 확장자만 붙여서 바로 활용해 보세요!

주요 특징

SCSS 사용 흐름

답글 남기기 응답 취소