Sass 소개

알아야 할 것

계속하기 전에, 다음 내용에 대한 기본적인 이해가 필요합니다:

  • 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는 CSS에 존재하지 않는 특성, 예를 들어 변수, 내장 규칙, mixin, 가져오기, 상속, 내장 함수 등 다양한 기능을 제공합니다.

Sass에 대한 유용한 간단한 예제

우리 웹사이트에 세 가지 주요 색상이 있습니다:

#a2b9bc
#b2ad7f
#878f99

그렇다면, 이 HEX 값들을 몇 번 입력해야 합니까? 많이 입력해야 합니까? 동일한 색상이 변경되면 어떻게 합니까?

다음과 같은 코드를 Sass로 작성할 수 있습니다. 여러 번 입력하지 않고도:

Sass 예제

/* 원래 색상에 대한 변수 정의 */
$primary_1: #a2b9bc;
$primary_2: #b2ad7f;
$primary_3: #878f99;
/* 변수 사용 */
.main-header {
  background-color: $primary_1;
}
.menu-left {
  background-color: $primary_2;
}
.menu-right {
  background-color: $primary_3;
}

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

Sass는 어떻게 작동하는가?}

브라우저는 Sass 코드를 이해하지 않습니다. 따라서, Sass 프리프로세서가 Sass 코드를 표준 CSS로 변환해야 합니다.

이 과정은 역번역(Transpiling)이라고 불립니다. 따라서, 번역기(某种程序)에 Sass 코드를 제공하고, CSS 코드를 얻어야 합니다.

팁:역번역은, 하나의 언어로 작성된 원본 코드를 다른 언어로 변환/번역하는 용어입니다.

Sass 파일 유형

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

Sass 주석

Sass는 표준 CSS 주석을 지원합니다 /* 댓글 */또한 내부 댓글을 지원합니다 // 댓글：

Sass 예제

/* 주요 색상 정의 */
$primary_1: #a2b9bc;
$primary_2: #b2ad7f;
/* 변수 사용 */
.main-header {
  background-color: $primary_1; // 여기서 내부 댓글을 추가할 수 있습니다
}