[Sass/SCSS] Sass/SCSS란 무엇이고, 왜 사용하는가?

프론트엔드 직무를 희망한다면, CSS를 직접 다뤄 봤다면, CSS가 불편하다고 느낀 적이 있을 것이다. 요소 하나하나에 스타일링 코드들을 덧붙이다 보면 비어있던 파일은 어느새 눈덩이처럼 금방 불려져 감당할 수 없을 정도로 커져있던 적, 다들 있을 것이다. 이를 위한 구원자가 바로 Sass/SCSS이다.

Sass/SCSS는 CSS에서 제공하지 않는 편리한 기능들을 제공해준다!!

이제 다시 정리해보자.

 

🎯 Sass/SCSS란?

CSS로 컴파일되는 스타일 시트 확장 언어이며 CSS 전처리기 중 하나이다.

 

브라우저는 Sass/SCSS 파일을 컴파일하지 못하기 때문에 개발은 Sass/SCSS를 기반으로 작성하되, CSS로 import하여 활용한다.

 

 

Sass 작성방식

Sass 방식과 SCSS 방식이 있는데, 이 두가지 방법은 각각 .sass와 .scss의 다른 확장자를 사용한다. 이 두 확장자는 중괄호 유무의 차이가 있다.

//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

 

 

 

---

💡 TIP: Visual Studio Code 사용자라면, Live Sass Compiler Extension을 사용하면 개발이 보다 쉬워질 것이다.

 

Inflearn에서 제주코딩베이스가 진행하는 [초급] 40분만에 훑어보는 Sass 강좌 수강 후 강의안을 참고하여 작성하였습니다.