[Sass/SCSS] CSS중노동 탈출하기 - 01. Sass(SCSS)를 시작하자!

좀더 수월한 노동(?)을 위해 몇년전부터 업무에 Sass를 사용하고 있습니다. 작업 효율이 훨씬 올라가고 활용도가 무궁무진 하지만 내가 과연 Sass를 잘 알고 활용하고 있는가에 대한 의문이 들어 다소 늦은감이 있지만 블로그에 기초부터 차근차근 정리해보려고 합니다! 

Sass는 무엇이고 왜 써야하지?

주특기라 생각했던 CSS가 나를 옥죈다 .. 길어지는 코드길이와 알수없는 구조 .. 지옥으로 가는 유지보수 ..
퍼블리셔 및 CSS를 관리해야 하는 모든 분들은 공감하시겠지요. 
여기저기 쓰여진 중복된 코드와 잘못된 상속으로 뒤엉킨 css코드에 고통받고 있다면,

Syntactically Awesome Style Sheets(문법적으로 끝내주는 스타일 시트).
Sass를 활용할 때입니다.

Sass는 CSS 전처리기로서 CSS에서는 쓸 수 없는 기능들을 가지고 있어 CSS의 생산성을 높여주는 역할을 합니다.
변수, mixin을 자유롭게 사용하여 중복되는 코드의 관리와 재사용을 용이하게 하거나(최근에는 CSS스펙 자체에 변수가 추가되었습니다만), 중첩 구조로 가독성을 높이고, 반복문과 조건문같은 프로그래밍 문법을 사용하여 체계적이고 구조적으로 개발할 수 있게 하는 등의 장점을 가지고 있습니다.

Sass와 SCSS

Sass에는 Sass(.sass 확장자)와 Scss(.scss 확장자) 두가지 문법이 존재합니다.

nav
  ul
    margin: 0
    padding: 0
    list-style: none

  li
    display: inline-block

  a
    display: block
    padding: 6px 12px
    text-decoration: none

👆👆 이것은 Sass(.sass 확장자)로 작성된 코드이고, 👆👆

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

👆👆 이것은 SCSS(.scss 확장자)로 작성된 코드입니다 👆👆

보시다시피 중괄호와 세미콜론 유무 외에는 눈에 보이는 차이점이 크게 없습니다. 
두 문법 중 아무거나 쓰셔도 상관은 없지만, 혼용을 해서 쓸수는 없기 때문에 저는 더 보기쉽고 CSS와 유사한 방식의 SCSS를 즐겨 사용합니다. 
물론 공부하기도 훨씬 쉽구요!

💡 때문에 이 포스팅과 앞으로 이어 쓸 시리즈 에서는 Sass를 SCSS문법 위주로 작성 할 예정입니다.

그래서 그거 어떻게 쓰는데?

Sass는 기본적으로 CSS만 작성할 수 있다면 아주 쉽게 배울 수 있지만, .scss나 .sass확장명으로 작성된 파일을 우리가 쓰는 웹브라우저는 읽을 수 없습니다. 그래서 브라우저가 읽을 수 있는 CSS파일로 바꿔주는.. 즉 컴파일하는 과정이 필요합니다.

컴파일러 설치하기

제가 Sass를 사용하기 시작할 때에는 Ruby라는 것으로 구현된 Sass를 설치해서 썼으나, 이는 2019년 부터 지원이 중단 되었다고 해요. RubySass 이후 다양한 언어에 쉽게 통합되는 C/C++언어로 구현된 LibSass와 이것을 Node.js 환경에서 사용할 수 있게 한 node-sass가 있었지만 이 역시 2020년 지원이 중단되면서 새로운 프로젝트에는 사용을 권장하지 않는다고 합니다. 대신 Dart sass라는 새로운 방식의 설치를 권장한다고 하네요.

👉 그래서 Sass 공식 사이트에서 권장하는 Dart Sass을 npm을 이용해 설치하도록 하겠습니다.

npm은 Node Package Manager를 말하며 타인이 배포한 패키지를 쉽게 설치할 수 있게 해줍니다.
npm을 사용하기 위해서는 Node.js가 설치되어 있어야 하므로 아래 링크에서 Node.js를 다운받아 설치 주세요.
Node.js 다운받기 : https://nodejs.org/ko/

명령 프롬포트(맥 사용자의 경우 터미널)를 열고 아래 명령어를 입력해 줍니다.

npm install sass -g

//맥OS인 경우
sudo npm install sass -g

여기까지 진행하셨다면, 아래 명령어를 입력하여 Sass가 제대로 설치되었는지 확인해 보겠습니다.

sass --version

Sass의 버전이 출력된다면 성공! 컴파일러를 설치했으니 간단하게 파일 하나를 컴파일 해보겠습니다.

.scss파일 .css로 컴파일하기

👉 제가 사용하는 VScode 에디터를 이용하여 컴파일 과정을 살펴보겠습니다.
단순히 컴파일 실습을 위한 예제이니 변수 개념이 이해가 안가셔도 상관 없습니다.

SASS프로젝트 라는 폴더 하나를 만들고, 그 안에 input.scss라는 파일 하나를 생성했습니다.
그리고 input.scss에 아래와 같이 코드를 작성했습니다.

정상적으로 컴파일이 된다면 body 의 $font-stack과 $primary-color 변수가 위에 지정된 값으로 대체되어야 합니다.

이제, VScode 상단의 메뉴 표시줄에서 터미널 > 새 터미널 을 열고 경로가 제대로 잡혔는지 확인한 후 아래의 명령어를 입력합니다.
(명령프롬포트나 터미널을 사용하셔도 됩니다. 단 꼭 경로를 확인해주세요!)

sass input.scss output.css

짜잔! 못보던 파일이 생성되었습니다. output.css.map은 소스맵 파일인데 이는 뒤에 이어질 포스팅에서 설명하도록 하고, output.css파일을 확인해 보겠습니다.

아까 지정한 변수가 정상적으로 대체된것을 확인할 수 있습니다. 이제는 브라우저가 읽는데 문제가 없겠네요~!

---

이어지는 포스팅에서는 다양한 컴파일 명령어 옵션과 소스맵 기능에 대해 살펴보겠습니다!
읽어주셔서 감사합니다!

 

** 본 포스팅은 Sass 공식문서 https://sass-lang.com/guide를 참고하여 작성하였습니다.

Sass: Sass Basics