Sass Tutorial

Sass Introduction

• Sass는 Syntactically Awesome Stylesheet의 약자입니다.
• Sass는 CSS의 확장입니다.
• Sass는 CSS 전처리기(pre-processor)입니다.
• Sass는 모든 버전의 CSS와 완벽하게 호환됩니다.
• Sass는 CSS의 반복을 줄여 시간을 절약합니다.
• Sass는 Hampton Catlin이 디자인하고 2006년 Natalie Weizenbaum이 개발했습니다.
• Sass는 무료로 다운로드하여 사용할 수 있습니다.

스타일시트는 점점 더 커지고 복잡해져서 유지관리가 어려워지고 있습니다. 그래서 CSS 전처리기가 도움이 될 수 있습니다.

Sass를 사용하면 변수(variables), 중첩 규칙(nested rules), 믹스인(mixins), 임포트(imports), 상속(inheritance), 내장 함수(built-in functions) 및 기타 항목과 같이 CSS에 없는 기능을 사용할 수 있습니다.

세 가지 주요 색상이 있는 웹 사이트가 있다고 가정해 보겠습니다.
색상 : #a2b9bc, #b2ad7f, #878f99

그렇다면 이러한 HEX 값을 몇 번 입력해야 합니까? 많이 입력해야 합니다. 그리고 같은 색상의 변형은 어떨까요?

위의 값을 여러 번 입력하는 대신 Sass를 사용하여 다음과 같이 작성할 수 있습니다.

/* define variables for the primary colors */
$primary_1: #a2b9bc;
$primary_2: #b2ad7f;
$primary_3: #878f99;
 
/* use the variables */
.main-header {
  background-color: $primary_1;
}
 
.menu-left {
  background-color: $primary_2;
}
 
.menu-right {
  background-color: $primary_3;
}

Sass를 사용할 때, 기본 색상이 변경되면 한 곳에서만 변경하면 됩니다.

브라우저는 Sass 코드를 이해하지 못합니다. 따라서 Sass 코드를 표준 CSS로 변환하기 위해 Sass 전처리기가 필요합니다.

이 프로세스를 트랜스파일링(transpiling)이라고 합니다.
따라서 트랜스파일러(일종의 프로그램)에게 Sass 코드를 제공한 다음 CSS 코드를 다시 가져와야 합니다.

Tip:
트랜스파일링은 한 언어로 작성된 소스 코드를 다른 언어로 변환/번역하는 용어입니다.

Sass 파일은 ".scss" 파일 확장자를 갖습니다.

Sass는 표준 CSS 주석 / * 주석 내용 * /을 지원하고, 추가로 인라인 주석 // 주석 내용 주석을 지원합니다.

/* define primary colors */
$primary_1: #a2b9bc;
$primary_2: #b2ad7f;
 
/* use the variables */
.main-header {
  background-color: $primary_1;  // here you can put an inline comment
}