Sass는 CSS 프리 프로세서입니다.

Sass는 CSS 반복을 줄여 시간을 절약 해줍니다.

사전학습

계속하기 전에 다음 사항을 기본적으로 이해해야 합니다.

• HTML
• CSS

Sass란? 

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

왜 Sass를 사용합니까? 

스타일 시트는 점점 커지고 복잡해지고 관리가 더 어려워지고 있습니다. CSS 프리 프로세서가 도움이 될 수 있는 곳입니다.

Sass를 사용하면 변수(Variables), 중첩 규칙(Nested rules), 믹스 인(Mixins), 가져 오기(import), 상속(inheritance), 내장 함수(Built-in functions) 및 기타 요소와 같이 CSS에 없는 기능을 사용할 수 있습니다.

Sass가 유용한 이유의 간단한 예 

다음과 같은 세 가지 주요 색상이 있는 웹 사이트가 있다고 가정 해 보겠습니다.

그러면 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 코드를 이해하지 못합니다. 따라서 Sass 코드를 표준 CSS로 변환하려면 Sass 전 처리기(pre-processor)가 필요합니다.

이 프로세스를 transpiling이라고합니다. 그래서, 약간의 Sass 코드를 transpiler (어떤 종류의 프로그램)에게 주고 약간의 CSS 코드를 다시 얻어야 합니다.

** Transpiling은 한 언어로 작성된 소스 코드를 다른 언어로 변환 / 번역하는 용어입니다.

Sass 파일 유형 

Sass 파일의 확장자는 ".scss"입니다.

Sass 주석 

Sass는 표준 CSS 주석 /* 주석 */를 지원하며, 또한 인라인 주석을 지원합니다 //주석 :

/* define primary colors */
$primary_1: #a2b9bc;
$primary_2: #b2ad7f;

/* use the variables */
.main-header {
  background-color: $primary_1; // 여기에 인라인 주석 들어감
}