[아무튼 Sass] 1. 시작하기 - Sass 개념, 컴파일러 설치

 

 

 

프롤로그

 

"CSS 인생은 전처리기를 도입하기 전과 후로 나뉜다"

......이런 말은 없지만, Sass를 배우면 CSS 작성이 짱짱 편해집니다.

신입 퍼블리셔부터 스타일시트 관리를 하는 개발자까지,

Sass에 대해 한번 정도 슥- 읽어두면 도움이 많이 될 거에요!

 

그래서 최대한 쉽고 편하게 익힐 수 있도록 시리즈물(?!)로 글을 써봅니다.

분량이 얼마나 될진 저도 몰라요 ∠( ᐛ 」∠)＿ 헿 (총 4편의 시리즈가 되었습니다 ✌️✌️)

 

아무튼 Sass 시리즈
1. 시작하기 - Sass 개념, 컴파일러 설치 👈 Here!
2. 기본 작성법 익히기 - 중첩, 참조, 변수, 보간
3. 더 편하게 CSS 다루기 - mixin, extend, 모듈화(import/use)
4. 더 멋지게 활용하기 - 흐름제어, 내장 모듈, 함수

 

이번 글에서 다루는 것:
- Sass란?
- Sass 컴파일러
- Dart Sass 설치
- Sass 소스맵

 

 

---

 

 

SASS의 개념

 

SASS가 뭔가요?

CSS는 배우기 쉬우며, 다루기 재밌는 언어입니다. 
하지만... 아주 잘 꼬이죠.

으아아ㅏㅏㅏㅏ

처음 쓸 때는 신나서 폰트 스타일도 주고 마진 값도 주고 그랬는데! 시간이 흐르면 이상하게 뒤엉켜 있습니다.
color: red; 를 줬는데 제목 색깔은 대체 왜 안 바뀌는지 모르겠고, margin: 10px; 를 줘도 여백은 늘어날 기미가 없습니다.

 

대체 왜 사람 말을 안 듣니!!!!

 

사실 생각해보면 그럴 만한데요, CSS는 사람이 보고 쓰기에 좋은 형태가 아니기 때문입니다.

셀렉팅부터 DRY(Don't Repeat Yourself) 원칙 따위 내다버린 모습인데,
이렇게 생긴 걸 누가 일일이 수정하고 싶을까요...

 

.sc_themecast .main_category .tab.id_show[aria-selected=true] {background-color: #adac0f; color: #fff}
.sc_themecast.id_culture .theme_category, .sc_themecast.id_culture .theme_hl {color: #42be6f}
.sc_themecast.id_culture .topstory_view .topstory_writer, .sc_themecast.id_culture .topstory_view.type_ad .topstory_info, .sc_themecast.id_culture .topstory_view.type_star .topstory_info { background-color: #edfaf2 }
.sc_themecast.id_culture .theme_badge {background-color: #42be6f}
.sc_themecast .theme_link .link_culture {float: left;color: #42be6f;padding: 5px 0 4px;margin-right: 16px}
.sc_themecast .main_category .tab.id_culture:hover {color: #42be6f}
.sc_themecast .main_category .tab.id_culture[aria-selected=true] {background-color: #42be6f;color: #fff}
.sc_themecast.id_school .theme_category, .sc_themecast .theme_category {overflow: hidden;text-overflow: ellipsis;white-space: nowrap;display: block;font-weight: 700}
.sc_themecast .theme_runtime {position: absolute;right: 8px;bottom: 6px;padding: 2px 4px;-webkit-border-radius: 2px;border-radius: 2px;font-size: 11px;line-height: 14px;color: #fff}
.sc_themecast .theme_runtime .runtime_bg {position: absolute;top: 0;left: 0;right: 0;bottom: 0;opacity: .7;filter: alpha(opacity=70);background-color: #000;-webkit-border-radius: 2px;border-radius: 2px;color: transparent}

 

ㅎ ㅏ..

 

CSS 내 반복되는 내용은 줄이고 보다 효율적으로 스타일시트를 관리할 수는 없을까요?
작업할 때도 유지보수할 때도 훨씬 편해질 텐데 말이죠.

 

넵. 이럴 때 필요한 게 바로
문법적으로 어썸한 스타일 시트 Syntactically Awesome Style Sheets,
이하 Sass 입니다.

 

 

 

Sass를 쓰면 $main-color: red; 와 같이 변수를 만들 수 있습니다.
그럼 이걸 h1 { color: $main-color; } 나 div { background: $main-color } 와 같이 돌려쓸 수가 있습니다.

수정이 필요해지면 변수의 값만 바꾸면 되니 유지보수가 훨씬 편해지죠.

안 어썸했던 CSS를 어썸하게 만들어 주는 것, 바로 Sass의 역할입니다.

 

 

Sass가 개발 과정에서 꼭 필요한 건 아닙니다. 어디까지나 '내가 편하게 코딩하고 싶으니까' 쓰는 도구입니다.
하지만 쓰면 엄청 편하다니까 아무튼 써보자구요! ᕕ( ᐛ )ᕗ

 

 

 

 

Sass는 전처리기

Sass는 CSS 전처리기(Preprocessor) 라고도 합니다.
CSS가 만들어지기 전에 이런저런 일들을 먼저 처리해 주기 때문이죠.

아까 봤던 변수 $main-color가 그 예입니다.
변수뿐만 아니라 @for(반복문), @if(조건문) 같은 흐름 제어문이나 내장함수 등 다양한 문법들을 사용할 수 있어요.

 

$_starType: ( default: 1.7rem, bbs: 1.8rem, total: 3rem );

@each $type, $size in $_starType {
    @if $type != default {
        .prdStar.type-#{$type} {
            .prdStarBack {
                width: $size * 5;
                height: $size;
                background-size: $size;
            }

            .prdStarIcon {
                background-size: $size;
            }
        }
    }

    @if $type == total {
        .prdStar.type-#{$type} {
            .prdStarScore {
                margin-left: .6rem;
                font-size: 3rem;
                font-weight: $mediumWeight;
                color: #000;
                line-height: 120%;
            }
        }
    }
}

 

평범하게 CSS 파일을 작성한다면 전혀 쓸 수 없었던 것을 Sass 문법을 통해 구현할 수 있게 되는 거죠.
나중에 이걸 평범한 CSS로 바꾸기만 하면 돼요. Sass가 변수를 일반 텍스트로 바꿔주고, 반복문을 하나하나 작성해주는 일을 해줍니다.

이처럼 개발자 - 브라우저 중간에 껴서 일을 해주는 게 CSS 전처리기, Sass의 역할입니다.

 

 

 

 

Sass, Less, Stylus

그렇다면 Sass 말고 다른 전처리기도 있을까요?

넵, Less나 Stylus 등이 유명한데요. Sass랑 비슷한 일을 하지만 문법이나 작동 방식이 조금 다릅니다.

어떤 전처리기를 사용할 것이냐는 개인의 취향! 이 글에서는 Sass에 대해서만 다룹니다 😉

 

 

 

 

Sass와 SCSS의 차이

앗, 잠깐! Saas 말고 SCSS란 것도 있던데, 둘은 뭐가 다른가요?
사실 SCSS = Sass라고 봐도 무관합니다. 신경 쓸 차이점은 '문법이 살짝 다르다'는 정도에요.

보면 Sass는 좀 더 깔끔하고, SCSS는 기존의 CSS 작성 방식과 유사하죠.
Sass 3 버전에서 좀 더 CSS에 호환될 수 있도록 도입된 것이 SCSS 문법입니다. 그래서 SCSS를 쓰면 CSS를 쓰던 방식과 유사하게 Sass의 기능을 사용할 수 있습니다.
기존 Sass 구문은 들여쓰기 문법을 사용해야 했지만, 새로 나온 SCSS 구문은 대괄호와 세미콜론을 사용하고 있어서 좀 더 친숙하게 쓸 수 있어요.

 

이것도 취향에 따라 선택할 수 있지만 이 글에선 SCSS를 사용합니다.
저도 실무에서는 SCSS를 사용하고, 공식문서도 SCSS를 기준으로 설명하고 있기 때문입니다.

CSS를 써봤다면 익숙한 형태라서 처음 접하더라도 보기 편할 거에요!

따라서 이 글에서 말하는 Sass는 'SCSS 구문을 사용하는 것'을 말하며, 파일의 확장자도 .sass가 아닌 .scss 를 사용합니다.

 

 

 

---

 

 

Sass 써보기

 

컴파일러 설치

Sass(SCSS)는 사실 문법만 알면 바로 사용할 수 있습니다.
문제는 '이걸 어떻게 평범한 CSS로 바꾸느냐' 입니다.

변수, 반복문, 조건문 등이 잔뜩 쓰인 .scss 파일을 만들고 이걸 그대로 서버에 올려버리면? 웹 브라우저는 이걸 이해할 수 없습니다.
브라우저가 해석할 수 있는 건 길고 못생긴 .css 뿐이거든요 🤔
$나 @for를 만나면 '뭐라는 거지...' 하면서 읽지 못하겠죠.

그래서 우리가 편하게 쓴 코드(SCSS)를 브라우저가 읽을 수 있는 코드(CSS)로 바꿔줄 필요가 있습니다.

이를 '컴파일'이라고 하며, 컴파일을 하기 위해선 '컴파일러' 설치가 필요합니다.

 

컴파일 전(SCSS)  vs.  컴파일 후(CSS)

설치 없이 컴파일만 하고 싶다면 스샷의 웹사이트 SassMeister 에서도 테스트할 수 있어요.

그렇지만 우린 두고두고 쓸 거니까 일단 한번 설치해 봅시다!

 

 

Ruby SASS

Sass는 윈래 Ruby 언어로 만들어졌습니다. 그래서 Ruby가 설치된 환경에서 gem install sass로 시작할 수 있습니다....만!
Ruby Sass는 2019년부터 지원이 중단되었으며 공식 문서에서도 사용을 추천하지 않습니다.

 

(이미 관짝 신세....)

그래서 여기선 다른 언어를 기반으로 한 Sass를 설치해 봅니다.

 

 

 

 

LibSass (node-sass)

Ruby Sass는 Ruby 환경이 필요한 데다 컴파일에 너무 오래 걸리는 단점이 있었습니다.

이에 대한 방안으로 나온 것이 LibSass인데요, 이는 C/C++로 Sass를 구현한 것입니다.
그리고 이걸 다양한 환경에서 쓸 수 있도록 하는 래퍼가 있는데, 그중에는 node.js 환경에서 쓸 수 있게 만든 node-sass도 있습니다.

기존에 sass를 쓰셨던 분들은 이게 더 익숙하실 거에요.

node.js가 설치되어 있다면 npm install -g node-sass로 시작할 수 있습니다.

 

 

 

Dart Sass

하지만 LibSass나 node-sass도 좀 오래됐다 보니 공식 팀에서는 작별 준비를 하고 있습니다.

대신 Dart Sass를 쓸 것을 추천하고 있어요. 컴파일도 빠르고, npm으로 배포도 가능하며, Dart가 보다 쉽고 친숙한 언어라 기여하기 쉽다는 게 장점이라고 합니다.

 

물론 아직 node-sass를 사용할 수 있지만, 점차 지원이 줄어들 것으로 보이기에 Dart Sass로 넘어가는 것을 추천합니다.

Dart Sass도 npm을 통해 설치할 수 있습니다.

 

 

 

 

npm으로 Dart Sass 설치하기

그나저나 npm이란 게 도대체 뭔가요?
npm(노드 패키지 매니저)은 대충... 노드 세계의 수많은 패키지들을 관리해주는 매니저님...이라고 할 수 있겠네요 🕴
공식적인 표현을 쓰자면, 자바스크립트 프로그래밍 언어를 위한 패키지 관리자입니다.
"여기 설치 좀 해주세요!" "최신 버전인지 확인해서 업뎃 좀요" 같은 일들을 npm이 알아서 해줍니다.

그러니 우리도 npm이란 걸 써서 Sass를 편안하게 설치해 보겠습니다. (참고: sass - npm)

 

npm을 사용하려면 여기서 node.js를 다운로드 받아 설치해 주세요.

npm은 Node.js의 기본 패키지 관리자이므로 함께 설치됩니다.
Windows라면 명령 프롬프트, Mac이라면 터미널을 열어 아래 명령어를 입력합니다.

npm -v

(= 매니저님 / 당신 버전은요?)

 

설치가 됐고 잘 대기하고 있는 모양입니다! 이제 Sass 설치를 부탁해 봅니다.

 

 

npm install sass -g

(= 매니저님 / 설치좀요 / sass를 / 글로벌하게)

 

CLI에서 쓰는 명령어를 세세히 알 필요는 없습니다! 지금 우리한테 중요한 건 Sass를 다운받아 설치하는 거니까요.
그럼 매니저님이 뭐라 중얼거리면서 설치가 끝납니다.

 

잘 설치됐는지 버전을 확인해 봅니다.

 

npm show sass version

(= 매니저님 / 보여줘요 / sass의 / 현재 버전을)

 

 

최신 버전이 잘 설치되었습니다.
자, 이제 Sass는 제 겁니다. 제 맘대로 할 수 있는 겁니다. ٩(•̀ᴗ•́ )✧

 

'The operation was rejected by your operating system.' 에러가 뜨면, sudo 키워드를 붙여 sudo npm install sass -g로 설치합니다.

sass --version으로 sass에게 직접 버전을 물어봐도 됩니다.

 

 

 

컴파일 실습

컴파일러가 잘 설치됐으니 실제로 연습해 봅시다!
우선 빈 폴더 안에 style.scss 파일을 만듭니다.

 

 

아래의 내용을 복사해서 편집기에 붙여넣은 뒤 저장합니다.

$color: red;

h1 { color: $color; }
p { color: $color; }

이게 CSS로 컴파일되면 어떤 모습이 될까요?
h1과 p의 color 속성값으로 red 가 들어갈 거 같은 느낌적인 느낌!

진짜 그렇게 바뀌는지 확인해 보죠 🔍

 

명령 프롬프트/터미널(이하 커맨드 창)을 열고, cd 를 입력 후 폴더를 드래그하여 커맨드 창 위에 드롭합니다.

엔터를 뙇 누르면 경로 설정이 완료됩니다.

 

 

 

이제 커맨드 창에 sass <변환할 scss 파일명> <변환될 css 파일명>을 입력합니다.

sass style.scss style.css

이제 폴더를 살펴보면? 갓 만들어진 따끈한 CSS 파일이 하나 보입니다.
내용을 보니 컴파일이 잘 됐네요!

 

이번엔 .bg { background-color: $color; } 를 추가하고 $color 변수의 값을 #000으로 바꿔봅니다.

$color: #000;

h1 { color: $color; }
p { color: $color; }
.bg { background-color: $color; }

그리고 다시 아까 명령어를 쳐준 뒤 CSS 파일을 확인합니다.

 

$color 변수만 수정했을 뿐인데 h1, p, .bg 각각의 컬러값을 한 번에 변경할 수 있어요!
앞으로 컬러값이 바뀌더라도 손쉽게 유지보수할 수 있겠습니다. 하나하나 Ctrl+F로 찾아 바꿔줄 필요 없이 sass가 알아서 어썸하게 적용해 주니까요.

게다가 변수니까 컬러값 말고 다른 것도 넣어볼 수 있겠고요.

$font: "";
$size: 1280px;
$boldWeight: 600;
...

변수의 무궁무진한 활용법은 다음 시간부터 알아봅니다 😉 (스테이 튠!)

 

SASS watch 옵션

아, 근데 매번 이렇게 수동으로 sass한테 명령을 내리려니 좀 불편합니다.
그럴 때는 `--watch`라는 플래그를 넣어 Sass가 해당 파일을 감시하게 만들 수 있습니다. style.scss에 변화가 생기면 알아서 컴파일하게끔 말이죠!

 

sass --watch style.scss style.css

아니면 폴더를 감시할 수도 있습니다.
scss 폴더 내 모든 변경사항을 감지하고 css 폴더로 컴파일하도록 하려면
sass --watch <input 폴더> <output 폴더>을 입력합니다.

sass --watch scss:css

 

 

그러면 scss 폴더 내 .scss 파일이 변경될 때마다 .css 파일을 만들어줍니다.

감시를 취소하려면 Ctrl+C를 입력하면 됩니다.

 

 

--watch 등 옵션처럼 끼워넣는 걸 플래그라고 합니다.
더 많은 플래그는 여기를 참고하세요.

 

 

 

소스맵의 역할

아까부터 신경쓰였던 게.... 여기 .map은 뭐하는 녀석이죠?

 

 

이건 소스맵(Sourcemap) 파일입니다. 컴파일된 소스를 원본 소스로 맵핑해 주는 역할을 해요.
말그대로 원래 소스가 어디에 있는지 보여주는 지도라고 할 수 있습니다.


개발자는 컴파일되기 전인 원본 소스를 보고 작업을 합니다. 하지만 브라우저는 컴파일이 된 소스를 보고 있죠.
그러다보니 브라우저에서 소스를 확인하며 디버깅하기가 번거롭습니다.
하지만 소스맵이 있으면 맵핑이 되기 때문에 CSS가 압축되어있거나 모듈로 쪼개져 있어도 볼 수가 있습니다.

.map 파일이 있으면 브라우저에서 .scss 파일을 볼 수 있어요

소스맵은 Sass 뿐만 아니라 Webpack 등 번들링 도구에서도 제공합니다.
아무튼 이건 개발자용 파일이고, 배포 시에는 필요 없으며, 자동으로 생기지 않게 설정하는 것도 가능하다 정도로 알면 될 것 같아요!

Sass 명령어에 --no-source-map 플래그를 끼워넣으면 소스맵이 생성되지 않습니다.

sass --no-source-map style.scss style.css

 

Scout-App 같은 GUI를 제공하는 어플리케이션도 있습니다. 근데 왜 굳이 CLI로 설치했냐면... 뿌듯하니까요 ;)

npm이 아닌 다른 패키지 매니저(Chocolatey, Homebrew)를 통한 Sass 설치도 가능합니다.
다만 npm은 자바스크립트를 위한 패키지 매니저이니, 웹 개발 중에 만날 일이 많을 거라 생각해 택했습니다. 이것도 개인의 선택과 자유!

 

 

 

---

 

 

에필로그

 

휴 =3 이제야 1편이 끝났네요!

이번 글에서는 Sass가 무엇인지, 어떻게 사용하는 건지 가볍게 살펴봤습니다.
아무튼 Sass를 설치했으니 이제 어디서든 써먹을 수 있겠습니다.

 

본격적인 활용법은 이제부터 차근차근 배워봅니다. 다음 글에서 만나요 👋

이 시리즈의 다음 글
2. 기본 작성법 익히기 - 중첩, 참조, 변수, 보간