Sass) $을 이용한 변수 문법

Sass 변수 문법은 계속 써야하는데 외우기 힘든 거를 반복해서 쓰면 아주 편리하고 좋음!!

예를 들면 색깔같은것들 ??#3D6AFF

요런 색깔 코드 언제 외워서 지정해놓고있누!!! 아무튼

 

나같은 빡대가리들도 변수 하나 지정해놓으면

아주 개꾸울~~~!

 

✅$ 표시를 이용해서 변수를 지정한다.

$변수명 : 값;

을 맨 위에 지정해두고

아래 스타일에서 변수명을 넣어서 입력하면 된다. 

scss파일에 이렇게 저장을 해놓으면 아래와 같은 비쥬얼스튜디오 확장프로그램을 통해서 CSS 파일로 컴파일(변환)해준다.

왜 굳이 변환해줘?? Sass 파일을 html 파일에 연결시키면 안됨? 하고 의문점이 들수 있지만...

브라우저는 ...아쉽게도 css 파일만 읽을수있다. 그래서 css파일로 변환해줘야한다.

아무튼 Live Sass Compiler가 Sass 파일을 변환시켜줘서 똑같은 css 파일이 하나 더 생긴다.

그럼 그 파일을 html에 연결시키면된다. 

 

Anyway!!!!

컴파일된 css 파일을 보면

Sass 파일이랑 리얼 ..똑같이 변환되는 것을 알수가 있다...

이녀석 좋은 녀석이네.

 

✅그런데...말입니다...?

CSS에도 똑같이 변수 정해주는 문법이 있다는데??? 

 

➡️:root 라는 가상클래스(pseudo-class)를 쓴 후에 --변수명 을 쓰고 

var(--변수명) 으로 불러오면 된다.

밑에처럼 하면됨!!

:root{
--main-color:#000012;
}

.background{
	background-color:var(--main-color);
    }