====== Sass Tutorial ======
<WRAP left notice 80%>
  * description : Sass Introduction
  * author      : 오션
  * email       : shlim@repia.com
  * lastupdate  : 2021-04-08
</WRAP>
<WRAP clear></WRAP>
\\
====Ref====
[[https://www.w3schools.com/sass/sass_intro.php|Sass Introduction]]\\

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

=====Why Use Sass?====
스타일시트는 점점 더 커지고 복잡해져서 유지관리가 어려워지고 있습니다. 그래서 CSS 전처리기가 도움이 될 수 있습니다.\\
\\
Sass를 사용하면 변수(variables), 중첩 규칙(nested rules), 믹스인(mixins), 임포트(imports), 상속(inheritance), 내장 함수(built-in functions) 및 기타 항목과 같이 CSS에 없는 기능을 사용할 수 있습니다.\\

=====A Simple Example why Sass is Useful=====
세 가지 주요 색상이 있는 웹 사이트가 있다고 가정해 보겠습니다.\\
색상 : #a2b9bc, #b2ad7f, #878f99\\
\\
그렇다면 이러한 HEX 값을 몇 번 입력해야 합니까? 많이 입력해야 합니다. 그리고 같은 색상의 변형은 어떨까요?\\
\\
위의 값을 여러 번 입력하는 대신 Sass를 사용하여 다음과 같이 작성할 수 있습니다.\\
<code 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;
}
</code>
\\
%%Sass%%를 사용할 때, 기본 색상이 변경되면 한 곳에서만 변경하면 됩니다.\\

=====How Does Sass Work?=====
브라우저는 Sass 코드를 이해하지 못합니다. 따라서 Sass 코드를 표준 CSS로 변환하기 위해 %%Sass%% 전처리기가 필요합니다.\\
\\
이 프로세스를 __트랜스파일링__(transpiling)이라고 합니다.\\ 
따라서 트랜스파일러(일종의 프로그램)에게 Sass 코드를 제공한 다음 CSS 코드를 다시 가져와야 합니다.\\
\\
**Tip:**\\
트랜스파일링은 한 언어로 작성된 소스 코드를 다른 언어로 변환/번역하는 용어입니다.\\

=====Sass File Type=====
%%Sass%% 파일은 %%".scss"%% 파일 확장자를 갖습니다.\\

=====Sass Comments=====
%%Sass%%는 표준 %%CSS%% 주석 ''%%/ * 주석 내용 * /%%''을 지원하고, 추가로 인라인 주석 ''%%// 주석 내용%%'' 주석을 지원합니다.\\ 
====Sass 예제====
<code sass>
/* 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
}  
</code>
\\
\\


{{tag>오션, Sass Introduction}}