[HTML]SASS 셋팅하기 & 변수 값 지정하는 방법

SASS 셋팅하기

---

프로그래밍스러운 문법이 존재한다

 

개발환경 셋팅하기

VScode 설치하기 

 

확장프로그램에서 Live Sass Complier를 설치해준다

ver 5 이상을 설치 해주어야 한다

 

Sass를 사용하기 위해서는 새로운 파일을 만들어서

뒤에 확장자 명을 .scss로 지정해주면 SASS 파일이 만들어 진다.

.sass도 똑같이 SASS 파일이 생성되는데 둘의 차이점은

괄호를 쓰냐 안쓰냐의 차이이다

 

웹 브라우저는 SCSS 파일을 읽지 못하기 때문에 이 SCSS 파일을

CSS 파일로 변환을 시켜주어야한다

SCSS를 CSS로 보기 위해서 Live Sass Complier 기능을 사용해야한다

 

하단의 탭에 Watch Sass를 눌러주면

자동으로 두 개의 CSS 파일이 생성된 것을 확인 할 수 있다

.map 파일이 있으면 CSS 파일을 디버깅하는것이 아니라 SCSS 파일을 분석해준다

SCSS에서 작성한 코드는 저장하면 자동으로 CSS 파일에도 적용되는 것을 볼수 있다

 

 변수 값 지정하는 방법

---

SASS로 '변수' 지정하는 방법

$사용할 변수명 : 사용할 값

 

(사이즈 값(px)들을 넣는 경우, 사칙연산('+'/'-'/'*'/'/')도 바로 가능하다)

 

같은 코드 값을 외우기 힘들고 지정한 변수명 하나로

값을 저장해서 사용할 수 있게 하기 위해서 사용한다

 

위에 이미지에서 같은 rgb 값을 가지고 있는데 R,G,B 값을 외우기 힘들고 귀찮기 때문에

SASS에 변수 값으로 지정해 주고 사용한다는 느낌이다

 background-color:  $base_c;

 

$base_c 에 값을 저장해두고 $base_c 만으로 쉽게 사용하는 것

 

CSS에서 변수 문법 만드는 방법

 

//변수 그룹

:root

{

--base-c : rgb(149, 131, 167);

}

//클래스 안에서 사용하는 방법

h1

{

background-color: var(--base-c);

width : calc(50px -20px); //사칙연산 계산 방법

width : calc(50% -20px); //사칙연산 계산 방법

}

---

TIP 1) SASS를 사용 할 때, 하단에 Watch Sass를 해두지 않으면

자동으로 CSS로 전환이 되지 않기 때문에 저장을 하더라도 .css 파일이 변경이 되지 않는다

 

TIP2 2) 컴파일을 원하지 않는 .scss 파일이 있는 경우, 파일명 앞에 _(언더바)를 붙여주면 컴파일을 하지 않는다