Ubuntu 16.04 / SASS 설치하는 방법

Ubuntu 16.04에서 구형 Ruby Sass를 설치하려면 APT의 ruby-sass 패키지나 RubyGems의 sass gem을 사용할 수 있습니다. 다만 Ruby Sass는 지원이 종료된 구현이므로, 기존 프로젝트를 재현할 때만 검토하고 새 개발 환경에는 현재 지원되는 운영체제와 Dart Sass를 사용하세요. gem으로 설치하는 방법도 최신 Dart Sass를 설치해 주지는 않습니다.

설치 전에 구현과 운영체제 지원 상태 확인하기

Sass는 변수와 중첩 규칙 등으로 작성한 스타일시트를 CSS(Cascading Style Sheets)로 변환하는 도구입니다. SCSS는 CSS와 비슷하게 중괄호를 사용하는 Sass 문법이며, 파일 확장자는 .scss입니다. sass라는 명령 이름이 같아도 Ruby Sass와 Dart Sass는 서로 다른 구현입니다.

Sass 공식 안내에 따르면 Ruby Sass는 2019년에 지원이 종료되었습니다. Ubuntu 16.04도 일반 지원과 Expanded Security Maintenance(ESM, 확장 보안 유지보수) 기간이 끝났으며, 2026년 10월 현재 추가 보안 지원은 Ubuntu Pro의 Legacy 부가 서비스 조건을 확인해야 합니다. 운영체제 지원 범위는 Canonical의 Ubuntu 16.04 안내에서 확인할 수 있습니다.

먼저 소스 코드와 기존 CSS를 백업하고, 프로젝트의 Gemfile.lock, package.json 등에서 사용하던 구현과 버전을 확인하세요. 아래 두 구형 설치 방법은 대안이므로, 둘 다 설치할 필요는 없습니다.

APT로 구형 Ruby Sass 설치하기

Ubuntu 16.04에서 사용하던 배포판 패키지를 재현하려면 터미널에서 다음 순서로 확인합니다. sudo를 실행할 수 있는 계정과 정상적으로 접근 가능한 APT 저장소가 필요합니다.

sudo apt update
apt-cache policy ruby-sass
sudo apt install ruby-sass
sass --version

apt-cache policy의 Candidate는 설치할 패키지 후보입니다. 후보가 없거나 업데이트가 실패하면 설치가 가능하다고 가정하지 말고 저장소 설정, 네트워크와 해당 환경의 지원 상태를 먼저 확인하세요. 패키지를 찾을 수 없다는 이유로 임의의 저장소를 추가하거나 서명 검증을 끄지 않습니다.

설치 후에는 Sass 버전이 표시되어야 합니다. 배포판 패키지 버전은 gem 버전과 다를 수 있으며, 이전 글에 있던 Sass 3.4.23 (Selective Steve)은 과거 출력 예시입니다. 현재 설치 결과가 반드시 그 문자열이어야 하는 것은 아닙니다.

RubyGems로 필요한 구형 버전 설치하기

기존 프로젝트가 Ruby Sass gem을 요구할 때 검토할 방법입니다. 아래는 3.7.4를 지정하는 예시이며, 프로젝트가 다른 버전을 요구한다면 그 요구사항을 우선합니다. RubyGems의 Sass 3.7.4 정보에는 Ruby 2.0.0 이상이 요구된다고 표시되어 있지만, 이 조건만으로 모든 의존 gem이 구형 Ruby에서 설치된다는 뜻은 아닙니다.

sudo apt update
sudo apt install ruby
ruby --version
gem --version
gem install --user-install sass -v 3.7.4 --no-document

--user-install은 시스템 전체 대신 사용자 gem 디렉터리에 설치하는 옵션입니다. 실행 파일을 찾지 못한다는 경고가 표시되면, RubyGems의 사용자 설치 안내처럼 해당 디렉터리의 bin을 PATH에 추가합니다. Bash에서는 다음 명령을 현재 터미널에 적용한 뒤 확인할 수 있습니다.

export PATH="$(ruby -r rubygems -e 'print Gem.user_dir')/bin:$PATH"
sass --version

계속 사용할 설정이라면 위 export 행을 ~/.bashrc에 한 번 추가하고 새 터미널에서 확인합니다. 되돌릴 때는 추가한 행을 제거하고 터미널을 다시 엽니다. 설치 실패 시에는 오류에 나온 의존 gem과 Ruby 버전을 확인하고, 프로젝트에 보관된 잠금 파일과 당시 환경을 기준으로 재현하세요. 인증서나 TLS 오류를 해결하려고 HTTPS 검증을 끄지 않습니다.

SCSS 파일을 CSS로 변환하여 확인하기

버전 출력만으로는 실제 변환까지 확인한 것이 아닙니다. 별도의 빈 작업 폴더에서 style.scss 파일을 만들고 아래 전체 내용을 저장하세요. 기존 파일이 있는 폴더에서는 예제 파일 이름이 겹치지 않는지 먼저 확인합니다.

$brand: #336699;

.notice {
  color: $brand;
  strong {
    font-weight: 700;
  }
}

그 폴더에서 다음 명령을 실행하면 style.css가 생성됩니다.

sass style.scss style.css

생성된 CSS에는 아래 선택자와 값이 있어야 합니다. 구현과 출력 형식 설정에 따라 공백, 줄바꿈이나 소스 맵 주석은 다를 수 있습니다.

.notice {
  color: #336699;
}

.notice strong {
  font-weight: 700;
}

색상 값을 바꾸어 다시 변환하고 CSS의 값도 바뀌는지 확인하면 입력 파일과 출력 파일의 관계를 확인할 수 있습니다. 원래 값으로 되돌린 뒤 다시 실행하면 예제 상태로 돌아갑니다. Sass 변환은 CSS 파일을 만드는 작업이며, 웹페이지에 적용하려면 해당 HTML에서 출력 CSS를 불러와야 합니다.

명령이 충돌하거나 설치를 되돌려야 할 때

설치했는데 sass: command not found가 나오면 설치 성공 여부와 PATH를 확인합니다. 예상과 다른 버전이 나오면 APT, 사용자 gem 또는 다른 도구로 설치한 실행 파일 중 어느 것이 먼저 선택되는지 살펴보세요.

command -v sass
type -a sass
sass --version

사용자 gem의 bin을 PATH 앞에 넣으면 그 위치의 명령이 우선할 수 있습니다. APT와 gem으로 중복 설치한 환경에서는 버전 숫자만 보지 말고 위 경로를 함께 기록하세요. 파일을 임의로 지우는 대신 설치에 사용한 관리 도구로 제거합니다.

• APT 설치를 되돌리려면 sudo apt remove ruby-sass를 사용합니다. 실행 전 제거 대상 목록을 읽고 다른 프로젝트가 사용 중인지 확인합니다.
• 위 예시의 사용자 gem을 제거하려면 gem uninstall --user-install sass -v 3.7.4를 사용합니다. 다른 버전이나 공용 의존성까지 일괄 제거할 필요는 없습니다.
• 오류 원인이 호환되지 않는 최신 SCSS 문법이라면 단순 재설치로 해결되지 않을 수 있습니다. 프로젝트가 요구하는 구현으로 빌드하거나, 코드를 검토하면서 Dart Sass로 전환합니다.

새 환경에서는 Dart Sass로 전환하기

현재 Sass의 기준 구현은 Dart Sass입니다. 공식 설치 문서는 운영체제와 CPU에 맞는 독립 실행 배포판 또는 npm 설치를 안내합니다. 이 절의 npm 예시는 지원되는 운영체제와 해당 Sass 버전이 요구하는 Node.js를 준비한 별도 개발 환경에서 실행하는 절차이며, Ubuntu 16.04의 기본 Node.js에서 실행된다고 가정하지 않습니다.

Node.js와 npm을 준비했다면 새 프로젝트 폴더에서 다음 명령으로 프로젝트 전용 개발 의존성을 설치할 수 있습니다. 기존 프로젝트에 적용할 때는 먼저 package.json과 잠금 파일을 백업하고 기존 빌드 설정을 확인하세요.

npm init -y
npm install --save-dev sass
npx sass --version
npx sass style.scss style.css

마지막 명령을 실행하기 전에 앞 절의 style.scss를 같은 폴더에 저장해야 합니다. npx sass는 이 절차에서 설치한 프로젝트의 Sass를 사용하며, 전역 sass 명령과 버전이 다를 수 있습니다. 설치 결과는 npm ls sass와 생성된 CSS로 확인합니다. 이 예시에서 추가한 개발 의존성은 npm uninstall --save-dev sass로 제거할 수 있습니다.

구형 프로젝트를 옮길 때는 테스트용 브랜치나 복사본에서 변환 결과를 비교하고, CSS 차이와 경고를 검토한 뒤 적용하세요. 단일 파일 변환 명령과 옵션은 Dart Sass 명령줄 문서에서 확인할 수 있습니다. Ruby Sass를 설치하는 것과 현재 Dart Sass로 전환하는 것은 별개의 작업입니다.