SASS 언어 소개

본 튜토리얼에서 우리는 전처리기 SASS를 배울 것입니다. SASS는 CSS에서 프로그래밍을 가능하게 하는 다른 전처리기인 LESS의 대안입니다.

사실 SASS는 두 가지 구문 변형을 가지고 있습니다. 첫 번째 변형도 SASS라고 불리고, 두 번째는 SCSS라고 불립니다. 둘 다 동일한 기능 세트를 지원하며 구문만 약간 다릅니다. 그러나 SCSS가 더 새롭고 널리 사용되기 때문에, 본 튜토리얼에서는 바로 그것을 배울 것입니다.

그래서, SCSS 구문은 CSS 구문과 유사합니다. 즉, CSS에서 보는 것과 같은 중괄호와 세미콜론이 있는 따옴표를 볼 수 있을 것입니다. 변수에 글꼴과 색상을 즉시 할당한 다음, 이 변수들을 body 선택자의 속성에 할당하는 SCSS 구문의 예를 살펴보겠습니다:

$font: Helvetica, sans-serif;
$color: #333;

body {
	font: $font;
	color: $color;
}