SaaS 설치와 간단한 명령어 사용법

이준익·2026년 4월 27일

1. Introduction

Sass (Syntactically Awesome StyleSheets) 는 CSS pre-processor 로서 CSS 의 한계와 단점을 보완하여 보다 가독성이 높고 코드의 재사용에 유리한 CSS 를 생성하기 위한 CSS 의 확장(extension) 이다. 프로젝트의 규모가 커지고 수정이 빈번해짐에 따라 발생하는 CSS 의 유지보수 문제를 해결하기 위해 다음과 같은 기능을 제공한다.

Sass 의 주요 기능

변수의 사용: 재사용 가능한 값을 변수로 관리
조건문과 반복문: 프로그래밍 로직 적용
Import / Nesting: 코드의 구조화 및 모듈화
Mixin / Extend: 스타일 재사용 및 상속

Sass 사용 시 장점

심플한 표기법으로 CSS 를 구조화하여 표현 가능하다.
팀원 간의 구문 수준 차이를 평준화할 수 있다.
Mixin 등의 기능을 통해 유지보수 편의성을 혁신적으로 향상시킨다.

2. Install & Environment

브라우저는 Sass 문법을 직접 이해하지 못하므로 .scss 파일을 .css 파일로 트랜스파일링 (컴파일) 하는 과정이 필요하다. 과거에는 Ruby Sass 나 node-sass 가 사용되었으나, 현재는 Dart Sass 가 표준이다.

설치 방법

# npm을 사용하여 전역으로 Sass 설치
$ npm install -g sass

3. Command & Usage

3.1 버전 확인

$ sass --version
# 결과 예시: 1.30.0 compiled with dart2js 2.10.4

3.2 트랜스파일링 (Transpiling)

sass [인풋파일]:[아웃풋파일] 형식을 사용하여 변환한다.

예시 코드 (foo.scss)

$site_max_width: 960px;
$font_color: #333;
$font_family: Arial, sans-serif;
$font_size: 16px;

body {
  color: $font_color;

  // Property Nesting
  font: {
    size: $font_size;
    family: $font_family;
  }
}

#main {
  width: 100%;
  max-width: $site_max_width;
}

명령어 실행

# 단일 파일 변환
$ sass foo.scss:foo.css

# 디렉터리 단위 일괄 변환
$ sass src/sass:dist/css

3.3 Style 옵션

출력되는 CSS 의 코드 스타일을 지정할 수 있다.

옵션	설명
`--style expanded`	표준적인 스타일의 CSS 파일 생성 (기본값)
`--style compressed`	빈 공간을 제거하여 용량을 최적화한 압축 스타일 생성

3.4 Watch 옵션

파일의 변경 사항을 실시간으로 감지하여 자동으로 트랜스파일링을 수행한다.

$ sass --watch src/sass:dist/css

4. SASS vs SCSS

Sass 3.0 부터 도입된 SCSS 는 CSS 와 호환성이 높고 친화적인 문법을 사용하여 현재 가장 널리 쓰인다.

구분	SCSS	SASS	CSS
중괄호 `{}`	필요	불필요 (들여쓰기 활용)	필요
세미콜론 `;`	필요	불필요	필요
Mixin	`@mixin`	`=`	지원 안 함
Include	`@include`	`+`	지원 안 함
확장자	`.scss`	`.sass`	`.css`