SCSS란?

 선행 지식 : HTML, CSS  

SCSS를 사용하면 변수, 중첩 규칙, 믹스 인, 가져 오기, 상속, 내장 함수 및 기타 항목과 같이

CSS에 없는 기능을 사용할 수 있습니다.

 

변수 사용이 가능하기 때문에

색상 등을 변수로 지정하여 사용하면

색상값을 변경할 경우, 변수 부분의 값만 변경하면 간단하게 모든 색상 변경이 가능합니다.

/* 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;
}