SASS - Overview & Install & Usage 시작해봅시다~!

 

 

SASS(SCSS)

 

---

 

 

• Sass is the most mature, stable, and powerful professional grade CSS extension language in the world
• Sass는 sass-lang.com 이 공식 사이트이며, 세상에서 가장 안정적이며 파워풀한 css 확장언어라고 말하고 있고, 내 생각도 비슷하다. ^^
  
  
• Sass를 왜 써야하는지에 대해서는 많은 유튜브나 사이트에서 이미 보고 왔거나 알고있을 거라고 생각합니다.
  이 페이지에서는 간단한 소개와 설치 방법 및 초기 사용방법등에 대해서만 정리해 보겠습니다.
• 또한 Vs code extention이 아닌 Terminal 사용방법을 기본으로 하고 있습니다.

 

드디어 SASS를 시작하게 되었군요. 축하드립니다~!!

 

Welcome to CODING HELL

A. Overview

 

 

B. Install

- 윈도우는 choco package manager를 설치한 후에 sass를 설치합니다.

- 맥은 homebrew 를 설치한 후에 sass를 설치합니다.

- npm을 이용하면 어디에서든 설치가 가능합니다.

- 설치방법안내 페이지 -> 바로가기

설치 방법

 

B. 설치가 끝났으면 설치가 잘 되었는지 터미널에서 확인합니다.

- 터미널에 아래의 명령을 치면 버전정보가 나옵니다. 1.69.3 또는 비슷한 숫자가 나오면 설치가 잘 된겁니다.

sass --version

 

C. 설치후 사용 명령어

- SASS 파일을 CSS파일로 만들기(컴파일하기)

- 종료할때에는 Ctrl + C를 누릅니다.

sass --watch common.scss:common.css
//common.scss 파일을 common.css 파일로 컴파일하여 만들겠다는 뜻
// --watch는 sass확장자 파일을저장할때마다 새로 자동 컴파일 하겠다는 것으로 nodemon과 비슷합니다.

sass -w scss:css
// scss폴더에 있는 *.scss 파일과 같은이름으로 css폴더를 만들어 *.css 파일을 만들겠다는 뜻
// 이때에 _*.scss 파일은 컴파일 하지 않습니다.
// -w는 --watch 를 축약하여 사용한 것입니다.

 

D. CSS파일을 압축하여 만들기

- 공백을 줄여 경량화된 css파일을 만듭니다.

sass -w -s compressed scss:css
// -s는 --style의 축약형입니다.
// compressed와 -s는 같이 사용합니다.

 

 

자, 어렵지 않아요~ 우리 영혼 챙겨가며 계속 공부해봅시다잉~~~!

 

 

본 문서는 제가 오랫동안 일해왔던 내용을 강의와 책편집을 위해 정리해둔 내용입니다.

힘들게 만든 만큼 공부하시는 분들께 도움이 되면 좋겠습니다.

제 피드를 공유하거나 링크를 해주시는것은 감사합니다~

 

 

 

본 블로그에 사용된 기본 스티커 외의 이미지들 또한 직접 제작한 것들입니다.

하여 출처없이 이미지나 내용만을 카피해서
포스트를 쓰신다거나 하는것은 하지말아주세요 ^^

감사합니다.

 

 

 

OS별 패키지 매니저

 

윈도우용 패키지 매니저 - Chocolatey

https://chocolatey.org/

Chocolatey - The package manager for Windows

 

 

맥용 패키지 매니저 - Homebrew

https://brew.sh/

Homebrew