Sass 입문 가이드

그리고 왜 Sass인가

CSS는 꾸준히 진화하고 있습니다. 가장 큰 진전 중 하나가 CSS 변수입니다. 그래도 번거로운 작업은 여전히 남아 있죠. 비슷한 스타일을 여러 번 써야 하는 상황을 떠올려 보세요. 특수 클래스를 만들어도 CSS만으로는 그걸 오버라이드할 마땅한 방법이 없습니다. 한꺼번에 값을 바꾸고 싶을 때는 또 어떻고요.

Sass를 쓰면 스타일과 값을 오버라이드할 수 있고, 한 곳의 값을 바꾸면 전체 스타일에 그대로 반영됩니다 — 순수 CSS 변수만으로는 완전히 대체하기 어려운 부분입니다.

설치

Windows

먼저 컴퓨터에 Ruby가 설치되어 있어야 합니다. 없다면 RubyInstaller를 받아 설치하세요 (Sass는 Ruby로 컴파일됩니다).

Mac

Mac이라면 Ruby가 기본 설치되어 있어 별도 설치가 필요 없습니다.

Sass 설치

Ruby가 준비되었다면 터미널(Mac) 또는 cmd(Windows)에서 설치 명령을 실행합니다.

cmd:

gem install sass

Terminal:

sudo gem install sass

버전 확인 (현재 Sass 버전을 출력):

sass -v

전처리

시작하기

이번 튜토리얼에는 두 개의 스타일시트가 필요합니다 — style.css와 style.scss. 둘 다 app 폴더 안에 둡니다. 다음 명령을 실행합니다.

sass --watch app/style.scss:app/style.css

sass 명령은 Sass를 CSS로 컴파일합니다. 위 명령에서는 입력(app/style.scss)이 출력(app/style.css)으로 컴파일되고, Sass가 입력 파일을 감시하다가 변경 시 자동으로 다시 컴파일합니다.

예제

변수

Sass에서는 값을 변수($)에 저장하고 스타일시트 전반에 재사용할 수 있습니다.

위 코드는 다음과 같이 컴파일됩니다.

믹스인

믹스인은 제가 가장 좋아하는 Sass 기능 중 하나입니다. 속성마다 벤더 프리픽스를 일일이 작성하는 것은 번거롭지만, @mixin을 사용하면 한 번 작성해 어디서든 재사용할 수 있습니다. opacity를 예로 들어보겠습니다.

$로 값을 전달해 믹스인을 유연하게 만들 수 있습니다.

위 코드는 다음과 같이 컴파일됩니다.

함수

Sass에서는 @function을 사용할 수 있습니다. 아래 예시에서는 px를 rem으로 (또는 그 반대로) 변환합니다. rem은 구형 IE 브라우저에서 지원되지 않으므로 폴백을 함께 제공해야 합니다. rem을 지원하면 rem을, 아니면 px를 사용합니다. Sass에서는 +, -, *, /, % 같은 연산자도 사용할 수 있습니다.

위 코드는 다음과 같이 컴파일됩니다.

중첩

Sass에서는 HTML처럼 CSS 규칙을 중첩할 수 있어 시각적 계층이 더 분명해집니다 — 더 읽기 쉽고, 정리되어 있으며, 명확합니다.

위 코드는 다음과 같이 컴파일됩니다.

마치며

Sass 짧은 튜토리얼이 도움이 되었기를 바랍니다. Sass는 CSS의 유지보수성을 높이고 가독성을 개선하며 번거로운 작업을 줄여줍니다. 제 GitHub 저장소에서 이 포트폴리오에 Sass를 어떻게 사용했는지 확인할 수 있습니다. 연락은 LinkedIn이나 ghsspower@gmail.com으로 부탁드립니다. 감사합니다!