SASS - 1장 Sass

Sass

1. Sass 란

Sass는 CSS로 컴파일 되는 스타일 시트 확장 언어이며 CSS 전처리기의 하나입니다. 브라우저가 Sass를 직접 로딩하는 것이 아니라 개발은 Sass를 기반으로 한 후, CSS로 익스포트하는 과정을 거칩니다.

• 브라우저가 Sass파일을 직접 읽지 못하기 때문에 일반 CSS로 컴파일해야 합니다.
• 웹업계에서 실제 많이 사용하는 전처리기입니다.

2. Sass 기술방식 2가지

Sass를 작성하는데에는 기본적으로 두가지 방법이 있습니다.

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

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

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

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

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

3. 환경 세팅

VSCode의 Extension을 사용합니다.
VSCode의 사용법 영상은 제주코딩베이스캠프 유튜브 채널 아래 영상을 참고해주세요.

VSCode에서 "Live Sass Compiler" install 해주시고, VSCode를 재부팅 하시면 됩니다.

출처 : 인프런 - [초급] 40분만에 훑어보는 Sass