1. Sass 소개 및 환경 설정

1. Sass나 SCSS 쓰는 이유

• 스타일시트가 점점 더 커지고 복잡해지면 유지보수가 어려움.

• Sass안에 있는 변수, 네이스팅, 믹스인, 가져오기, 상속, 내장기능 등 css에는 없는 편의 기능들이 있어 시간을 절약할 수 있습니다.

• 코드 재사용이 가능합니다.

2. Sass

2-1. Sass 란

• 브라우저가 Sass파일을 직접 읽지 못하기 때문에 일반 CSS로 컴파일해야 합니다.

• 웹업계에서 실제 많이 사용하는 전처리기입니다.

2-2. Sass 기술방식 2가지

• .sass 기술방식과 .scss 방식 → 다른 파일 확장자를 사용합니다.

• Sass와 Scss가 있는데 그 중에서 일반적으로 CSS와 좀 더 유사한 SCSS를 사용합니다. 왜냐하면 SCSS는 CSS와 동일하게 중괄호를 사용하는 방식이기 때문입니다.

//SCSS
$font-stack: Helvetica, sans-serif;
$primary-color : #333;

body {
	font: 100% $font-stack;
	color: $primary-color;
}

//Sass
$font-stack: Helvetica, sans-serif
$primary-color : #333

body 
	font: 100% $font-stack
	color: $primary-color

2-3. 환경 세팅

2-4. 번외 Sass → CSS 컴파일 방법

1. Sass파일을 가져와서 웹 사이트에서 사용할 수 있는 일반 CSS 파일로 저장합니다.

2. 아래 설명한 설치 방법대로 Sass가 설치되면 터미널에서 Sass명령어를 사용하여 .SCSS파일을 Sass 컴파일러를 통해 컴파일 합니다.

3. .scss파일이 .css로 바뀝니다.

1. npm을 설치하도록 하겠습니다. node.js를 설치하면 자동적으로 npm도 설치됩니다. 홈페이지(http://www.nodejs.org)에서 LTS 버전으로 다운로드 받아주세요.



 

2. VSC에서 터미널(Ctrl + `)을 열어주세요.

1) npm버전이 출력되면 설치되어 있음을 의미합니다.

npm -v

 

2) -y를 써서 질문 없이 기본세팅합니다. / 폴더명 한글은 에러가 발생하므로 주의합니다.

npm init -y

 

3) 위 명령어를 터미널에서 입력하면 아래 파일 package.json이 생성됩니다.

 

3. node-sass 설치해야 합니다.

npm i node-sass 

위 명령의 자세한 내용은 아래 사이트(https://www.npmjs.com/package/sass)를 참고해주세요. node-sass는 Sass의 C 버전인 LibSass에 제공하는 라이브러리입니다.

sass

A pure JavaScript implementation of Sass.

https://www.npmjs.com/package/sass

 

위 명령어를 입력하게 되면 node_modules와 package-lock.json이 생성됩니다.

※ git commit 할 경우, node_modules와 package-lock.json 파일은 .gitignore파일안에 작성하여 git commit에서 제외시킵니다.

Sass에게 빌드할 파일과 CSS를 출력할 위치를 지정해야 합니다.

터미널에서 실행하면 단일 sass 파일인 input.scss가 발생하고 해당 파일이 output.css로 컴파일 됩니다.

"sass": "node-sass -w -r scss/input.scss src/output.css "

→ scss파일안에 있는 style.scss에서 src/style.css로 컴파일 할 수 있도록 설정합니다.(변경 가능합니다.)

1. sass 실행하는 소스입니다.

npm run sass 

1. sass 업데이트 하기 - options 사용합니다.

-w, --watch                Watch a directory or file
-r, --recursive            Recursively watch directories or files