SCSS vs SASS

SCSS와 SASS는 CSS를 더 효율적이고 강력하게 작성할 수 있도록 도와주는 CSS 전처리기 (preprocessor)이다. 

둘 다 SASS(Syntactically Awesome Style Sheets)라는 프로젝트에서 나온 문법이다. 

CSS에 변수, 중첩(nesting), 믹스인(mixin) 등 프로그래밍적인 기능을 추가해 개발 생산성을 높여준다. 

 

SCSS와 SASS의 차이와 특징을 정리한다. 

 

1. SASS

SASS는 2006년 개발된 CSS 전처리기로, 두 가지 문법을 제공한다.

1) SASS(들여쓰기 기반 문법): 확장자는 .sass 이며, 중괄호 {} 와 세미콜론 ; 을 사용하지 않고 들여쓰기로 구조를 표현한다. 

2) SCSS(CSS와 유사한 문법): 확장자는 .scss 이며, CSS와 거의 동일한 문법을 사용한다. 

현재는 SCSS를 더 널리 사용하고 있고, SASS라는 이름 자체가 프로젝트 전체를 의미하기도 하지만, 문법을 구분할 때는 들여쓰기 기반을 SASS, CSS 기반을 SCSS라고 부르는 경우가 많다. 

 

2. SCSS와 SASS 주요 차이 

1) 문법 스타일 

- SCSS : CSS와 유사하고 중괄호와 세미콜론을 사용한다. 기존 CSS 코드를 그대로 붙여넣어도 동작한다. 

$primary-color: #3498db;

.container {
  width: 100%;
  background: $primary-color;

  .item {
    padding: 10px;
  }
}

 

- SASS : 들여쓰기로 블록을 구분하고, 중괄호와 세미콜론이 없다. 더 간결하지만, 익숙해지기까지 시간이 걸린다. 

 

$primary-color: #3498db

.container
  width: 100%
  background: $primary-color

  .item
    padding: 10px

 

2) 호환성 

SCSS는 기존 CSS와 호환성이 높다. 

SASS는 파이썬 스타일의 들여쓰기를 좋아하는 개발자에게 적합하다. 

 

SCSS가 더 널리 사용되고 있다. 

대부분의 프레임워크(부트스트랩 같은)와 라이브러리가 SCSS를 기본으로 지원한다. 

 

3. 공통 기능 (SCSS와 SASS 모두 제공)

1) 변수 Variables : 색상, 크기 등을 변수로 저장해 재사용 가능하다. 

ex) $font-size: 16px;

2) 중첩 Nesting : CSS 셀렉터를 계층적으로 작성 가능하다. 

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

 

3) 믹스인 Mixins : 재사용 가능한 스타일 블록을 정의한다. 

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

 

4) 상속 Extend/Inheritance : 한 스타일을 다른 스타일에 상속한다. 

.error { color: red; }
.severe { @extend .error; font-weight: bold; }

 

5) 연산 Operations : 색상, 크기 등에 대해 수학적 계산이 가능하다. 

ex) width: 100px + 20px;

 

6) 조건문과 반복문 : @if, @for, @each 등을 사용해 스타일을 동적으로 생성한다. 

 

CSS가 익숙하고, 팀 작업 시 일관성 유지해야 할 경우, 기존 CSS 코드를 재사용하고 싶다면 SCSS를 추천한다. 

간결한 코드를 선호하고 들여쓰기 기반 문법에 익숙하다면 SASS를 추천한다. 

 

4. SCSS/SASS 컴파일 방법

두 CSS 전처리기 모두 브라우저에서 직접 실행되지 않기 때문에, CSS로 변환하는 컴파일 과정이 필요하다. 

SCSS와 SASS 모두 동일한 컴파일러(Sass 컴파일러)를 사용하며, .scss 나 .sass 파일을 .css 파일로 변환한다. 

 

1) 명령줄 CLI 사용 

Sass는 공식적으로 CLI 도구를 제공한다. 

이를 사용하려면 먼저 Node.js 를 설치한 후 Sass를 설치한다. 

 

- 설치 

npm install -g sass

 

- 컴파일 명령어 

: 단일 파일 컴파일 - 아래 명령어는 input.scss 를 output.css 로 변환한다는 뜻

sass input.scss output.css

 

: 실시간 감지 (watch 모드) : 파일이 수정될 때마다 자동으로 컴파일한다 

sass --watch input.scss:output.css

 

: 폴더 전체 컴파일 : src 폴더의 모든 SCSS/SASS 파일을 dist 폴더에 CSS로 변환한다. 

sass --watch src:dist

 

- 옵션 : 압축 출력 --style=compressed (공백과 줄바꿈 제거) 

sass input.scss output.css --style=compressed

 

2) 빌드 도구 사용 

보통 웹 개발에서는 주로 빌드 도구와 함께 SCSS/SASS를 컴파일한다. 

- Webpack : sass-loader, css-loader, style-loader 를 사용한다. 

module: {
  rules: [
    {
      test: /\.scss$/,
      use: ['style-loader', 'css-loader', 'sass-loader']
    }
  ]
}

 

- Vite : 기본적으로 SCSS/SASS 지원, sass 패키지만 설치하면 된다. scss 파일을 import 하면 자동 컴파일한다. 

npm install sass

 

- Gulp : gulp-sass 플러그인 사용 

const gulp = require('gulp');
const sass = require('gulp-sass')(require('sass'));

gulp.task('sass', function () {
  return gulp.src('src/*.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(gulp.dest('dist'));
});

 

3) 편집기 확장 프로그램 : VS Code 

Live Sass Compiler 확장 프로그램 설치하면 

SCSS/SASS 파일 저장 시 자동으로 css로 컴파일된다. 

설정에서 출력 경로와 스타일(압축 여부 등) 조정 가능한다. 

 

4) Sass 공식 GUI ehrn (예전 방식)

과거에 SassMeister 같은 GUI 도구가 있었다. 

현재는 CLI나 빌드 도구가 주류이다. 

 

 

Node.js 와 sass 패키지가 설치되어 있어야 CLI 방식이 가능하다. 

입력파일과 출력파일의 경로를 정확히 지정해야 한다. 

최신 Sass는 Dart로 작성된 sass 패키지를 사용하며, 과거 Ruby 기반 Sass는 더 이상 권장되지 않는다. 

 

소규모 프로젝트에서는 VS Code의 Live Sass Compiler로 간단히 컴파일 한다. 

대규모 프로젝트에서는 Webpack, Vite 같은 빌드 도구로 자동화 한다. 

빠른 테스트는 CLI 의 sass --watch 를 사용한다.