본문 바로가기
  • purple-whale
SASS(SCSS)

SCSS란?

by purple-whale purple-whale 2021. 1. 21.

 선행 지식 : 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;
}

 

 

'SASS(SCSS)' 카테고리의 다른 글

SCSS - @import 하기  (0) 2021.01.22
SCSS : @mixin - @include 사용하기  (0) 2021.01.22
SCSS 작성 하기  (0) 2021.01.22
SCSS 변수  (0) 2021.01.21
SCSS란?  (0) 2021.01.21
SASS 컴파일 하기 (window)  (0) 2021.01.21

댓글0