[Sass] Sass란?

Sass에 대해 알아보자

 

 

[ Sass ]

 

Sass(Syntactically Awesome StyleSheets)는 CSS pre-processor로서 CSS의 한계와 단점을 보완하여 보다 가독성이 높고 코드의 재사용에 유리한 CSS를 생성하기 위한 CSS의 확장이다.

 

CSS의 간결한 문법은 배우기 쉬우며 명확하여 프로젝트 초기에는 문제가 없이 보이지만, 프로젝트 규모가 커지고 수정이 빈번히 발생함에 따라 쉽게 지저분해지고 유지보수도 어려워지는 단점도 가지고 있다.

 

 

이러한 CSS의 태생적 한계를 보완하기 위해 Sass는 다음과 같은 추가 기능과 유용한 도구들을 제공한다.

 

• 변수의 사용
• 조건문과 반복문
• Import
• Nesting
• Mixin
• Extend/Inheritance

CSS와 비교하여 Sass는 아래와 같은 장점이 있다.

 

• CSS보다 심플한 표기법으로 CSS를 구조화하여 표현할 수 있다.
• 스킬 레벨이 다른 팀원들과의 작업 시 발생할 수 있는 구문의 수준 차이를 평준화할 수 있다.
• CSS에는 존재하지 않는 Mixin 등의 강력한 기능을 활용하여 CSS 유지보수 편의성을 큰 폭으로 향상할 수 있다.

 

 

[ 설치 ] 이러한 CSS의 태생적 한계를 보완하기 위해 Sass는 다음과 같은 추가 기능과 유용한 도구들을 제공한다.

 

• 변수의 사용
• 조건문과 반복문
• Import
• Nesting
• Mixin
• Extend/Inheritance

CSS와 비교하여 Sass는 아래와 같은 장점이 있다.

 

• CSS보다 심플한 표기법으로 CSS를 구조화하여 표현할 수 있다.
• 스킬 레벨이 다른 팀원들과의 작업 시 발생할 수 있는 구문의 수준 차이를 평준화할 수 있다.
• CSS에는 존재하지 않는 Mixin 등의 강력한 기능을 활용하여 CSS 유지보수 편의성을 큰 폭으로 향상시킬 수 있다.

 

[ 설치 ]

브라우저는 Sass의 문법을 알지 못하기 때문에 Sass(.scss) 파일을 css 파일로 트랜스파일링(컴파일)하여야 한다. 따라서 Sass 환경의 설치가 필요하다.

 

 

1. node.js를 다운 받고 아래 명령어를 입력한다.

$ npm install -g sass

 

※ npm이란?

npm(노드 패키지 매니저)는 수많은 패키지들을 관리하는 역할 즉, 자바스크립트 프로그래밍 언어를 위한 패키지 관리자를 말한다. 

 

---

 

2. scss 파일을 만들 경로를 설정해준다.

 

 

$ cd (내가 설정할 경로)

 

---

 

 

3. .scss 파일을 만들어준다. 

 

 

 

Sass와 SCSS의 차이

Sass 말고 SCSS라는 것도 있다.
사실 SCSS = Sass라고 봐도 무관하다. 신경 쓸 차이점은 '문법이 살짝 다르다'는 것이다.

REF: https://nykim.work/97

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

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

 

---

 

4. Sass -> CSS

 

위에서 만든 .scss 파일을 CSS 파일로 바꿔야 컴퓨터는 인식할 수 있다. 

 

 

 

// sass <변환할 scss 파일명> <변환될 css 파일명>
sass style.scss style.css

 

그러면 style.css라는 파일이 자동 생성되며 컴파일된다! 

 

 

 

이렇게 style.scss에서 수정사항이 있다면 내용을 바꿔주고 다시sass style.scss style.css를 하면 다시 컴파일된다.

 

이렇게 수정할 때마다 매번 컴파일을 해야 한다면 번거롭고 불편하다. 

 

그래서 자동으로 컴파일해줄 수 있는 명령어가 있다. 

 

sass --watch style.scss style.css

 

'--watch'라는 플래그를 넣어 Sass가 해당 파일을 감시하게 만드는 것이다. 

그래서 style.scss에 변화가 생기면 알아서 컴파일하게 된다.

 

아니면 이렇게 파일 한 개가 아닌 폴더 자체를 감시할 수도 있다.

scss폴더 내 모든 변경사항을 감지하고 css폴더로 컴파일하도록 하려면

sass -watch <input 폴더>:<output 폴더>를 입력하면 된다. 

 

sass --watch sass:css

---

 

※ map의 역할 

 

컴파일했을 때 style.css와 함께 style.css.map이라는 파일도 같이 생성되었다.

 

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


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

.map 파일이 있으면 브라우저에서 .scss 파일을 볼 수 있는 것이다.

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

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

 

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

 

 REF: https://poiemaweb.com/sass-basics

          https://nykim.work/97