❏ scss - 변수선언하기!

 

안녕하세요!

 

css를 사용하다 보면 반복되는 배경색을 하나하나 추가하거나,

선택자로 선택을 해서 코드의 줄이 늘어나는 등등 약간의 번거로움이 있습니다.

 

scss 그러한 점을 해결하는 방법이 있습니다.

바로 변수를 선언하는 방법인데요!

 

오늘은 scss에서 변수선언하는 방법과 사용방법에 대해서 알아보겠습니다!

---

1. 변수선언

 

scss에서의 변수선언은 아래와 같습니다.

/*scss의 변수선언*/
$변수명: 변수값;

/*ex*/
$background01: #fff;
$background02: #f0f0f0;
$mainfont: 'SUITE-Regular';
$maincolor: orange;
$font_size: 1.1rem;

 

2. 변수 사용하기

 

변수를 사용하는 방법은 원하는 곳에 지정한 변숫값을 넣어주면 됩니다.

/*변수사용법*/

.요소{
	속성명 : 변수;
}

/*ex*/

div{
	color: $maincolor;
    font-family: $titlefont;
    background: $background03
    font-size: $font_size;
}

 

- css와 scss 비교해보기

 

 

---

오늘도 읽어주셔서 감사합니다!

(･`◡´･)