[SCSS] 01. SCSS 개요

이번 시리즈 포스트에서는 SCSS에 대해서 살펴보자.

 

답답한 CSS에서 깜짝 놀랄만한 SASS로!! 그리고 Scss까지.

 

개인적으로 frontend에서 backend까지 풀스택으로 웹을 다루는 개발자의 입장에서 가장 좀 답답하다고 생각되는 분야가 있다면 바로 CSS이다.  물론 부족한 미적 감각으로 인해 아무리 만지작 거려도 예뻐지지 않는다는 점도 일부 작용하겠지만 CSS는 쉬운 듯하면서 어려운 것 중 하나이다. 아니 어렵다기보다는 답답하다. (어려운 측면은 종류가 많아서 원하는 걸 찾기가 어려운 면이 있다.)

CSS에는 일반적으로 프로그래밍에서 사용하는 그 흔한 변수나 함수등이 없다. 외부 CSS를 링크거는 등 모듈화 하려는 노력이 있으나 전체적으로 재사용하기가 어려우며 규모가 커질수록 유지보수성 역시 떨어지게 된다. 답답한 친구 CSS

 

SASS(Syntatically Awesome Style Sheet)

이런 답답한 CSS를 작성하는 문법을 깜짝 놀랄만한게 변신시켜 주는 녀석이 있으니 바로 SASS이다.

https://sass-lang.com/

Sass: Syntactically Awesome Style Sheets

SASS는 CSS 전처리기의 일종으로 결국은 CSS로 컴파일되서 사용된다. SASS는 다양한 프로그래밍적인 방법을 이용해서 코드의 재활용성 및 가독성을 향상해서 프로그래머가 CSS를 작성할 때도 전혀 답답하지 않게 도와준다. 이제 디자인만 잘 하면 되는데...

참고로 이런 SASS의 구현체로 Dart Sass, LibSass, Ruby Sass가 존재한다.

 

CSS 전처리기로는 Less, SASS, Stylus 등이 있다.

 

SCSS(Sassy CSS)

SCSS는 SASS 3.0에서 등장한 내용으로 SASS의 super set이기 때문에 SASS의 모든 내용을 가지고 있다. 특징은 CSS 구문과 완전히 호환되어서 사용하기 편하고 SASS와도 문법적으로 거의 비슷해서 거부감이 없다.

앞으로의 포스팅은 Scss 기준으로 작성될 예정이다.(scss와 sass의 비교는 https://sass-lang.com/ 에 예제 별로 잘 나와있기 때문에 참조하면 된다.)

$color: blue;

h1 {
color: $color;
}

p {
color: $color;
}

예를 들어 위의 코드는 color라는 이름의 변수를 설정하고 h1, p 태그의 전경색으로 재사용하고 있는 모습이다.

Sassy의 뜻이 궁금하다면? 

 

환경설정

Scss 기반으로 CSS를 작성할 때는 .scss라는 파일을 작성한다. 당연히 브라우저는 모르는 녀석이다. 알다시피 브라우저는 HTML, CSS, J.S 파일만 취급한다. 따라서 scss 파일을 CSS 파일로 컴파일해서 사용해야 한다. 이를 위한 도구와 설정에 대해 살펴보자.

online sass compiler

온라인 상에서 간단히 .scss 파일을 css파일로 컴파일할 수 있는 기능을 제공해 주는 사이트들이 존재한다. 그중에서 좀 유명한 녀석이 sassMeister이다. 사용법은 간단하기 때문에 한 번씩 방문하고 클릭해 보면 끝이다.

https://www.sassmeister.com/

SassMeister | The Sass Playground!

 

하지만 작성된 소스를 매번 사이트에 넣고 변환하기가 상당히 번거롭다. 따라서 본격적인 개발을 위해서는 로컬 환경에 컴파일할 수 있는 도구를 설치하는 것이 좋다.

 

sass compiler

로컬 환경에서 scss(또는 sass) 파일을 컴파일 하기 위해서는 node.js 기반의 sass 컴파일러 등 컴파일러를 설치하면 된다. 다음의 명령을 이용해서 컴파일러를 설치하고 버전을 확인해 보자.

quietjun@quietjun% npm install sass -g

quietjun@quietjun % sass --version
1.53.0 compiled with dart2js 2.17.3

sass는 dart sass 기반의 컴파일러이고 현재 버전은 1.53.0 임을 알 수 있다.(물론 버전은 시간에 따라 달라질 것이다.)

이제 sass 명령을 이용해서 compile 해볼 수 있는데 기본 사용법은 아래와 같다.

sass <input.scss> [output.css]

sass --watch <input.scss> [output.css]                      // 지속적인 감시, 컴파일

sass <input.scss>:<output.css> <input/>:<output/> <dir/>    // 폴더 대상 처리 가능

 

이제 아래 표의 좌측에 있는 scss를 작성하고 컴파일을 진행하면 우측의 css가 생성된다.

hello.scss	hello.css
$color: blue; h1 { color: $color; } p { color: $color; }	h1 { color: blue; } p { color: blue; }

# 컴파일
uietjun@quietjun ch12_sass % sass hello.scss hello.css

 

이때 생성된 결과물을 보면 hello.css와 함께 hello.css.map 파일이 생성된 것을 확인할 수 있는데 이 파일은 scss와 css 파일을 매핑하는 역할을 수행하며 css 디버깅에 사용된다. 

만약 이 map 파일이 없을 경우에는 디버거를 통해서 사용된 css를 점검해 보면. css로 연결되는 것을 확인할 수 있다.

그런데 우리는 css를 작성 중인 것이 아니라 scss 파일을 작성하고 있기 때문에 hello.css의 1번 라인보다는 scss 파일에서의 위치가 더 중요하다. 이때 map 파일이 있다면 아래와 같이 scss 파일에서의 위치를 보여준다.

 

vscode extension 활용

매번 콘솔을 통해서 컴파일하는 것이 귀찮다면 사용하는 개발 툴에 확장을 설치하는 것도 하나의 방법이다. 만약 vscode를 사용 중이라면 Live Sass Compiler의 사용을 추천한다.

똑같은 이름, 아이콘의 것이 2개가 있는데 처음것은 deprecate 되었다. 두 번재 'Glenn Marks'님이 만든것으로 설치하자.

이 플러그인을 설치하면 vscode 하단에 실시간 컴파일 및 모니터링을 위한 버튼이 생성되는데 Watch Saas와 Watching... 이 토글 된다. 실시간으로 컴파일을 처리하고 싶다면 Watching... 상태로 두면 되고 나중에 보고 싶은 경우는 Watch Saas 상태로 두면 된다.

 

 

주석문 작성

 

단일행 주석문 추가

sass에서는 주로 3가지 형태의 주석문이 사용된다.

• // : 단일행 주석으로 컴파일 과정에서 사라져 css로 전달되지는 않는다.
• /* comment */ : 다중행 주석으로 컴파일 후 css에도 그대로 전달된다. 하지만 compress mode에서는 제거된다.
• /*! comment*/ : 역시 다중행 주석인데 compress mode에서도 유지된다. 참고로 compress mode를 사용하기 위해서는 컴파일 시 --style compressed를 추가하면 된다.

// 단일행 주석은 컴파일 과정에서 사라져 css로 전달되지 않음

/* 이 주석은 css로 전달되지만 
compress mode에서는 제거됨 */

/*! 이 주석문은 compress mode에서도 유지됨 
sass hello.scss --style compressed*/

p/* 다중행 주석은 어디든 사용 가능 */.sans {
  font: Helvetica,
  sans-serif;
}

 

이상으로 Scss를 사용하기 위한 기본 설정들을 마쳤다. 다음 포스트에서는 본격적으로 문법에 대해서 살펴보자.