[IT] SASS - VScode에서 사용하기 ( VS코드)

SASS !!

앞으로 VScode사용법, 구조, 기초분법, 함수, 연산자, 템플릿 , 파일 가져오기 등을 알아보자 !

---

ㅇ SASS 란 ?

ㅡ CSS의 확장 언어 : CSS보다 조금 더 높은 자유도를 개발자들에게 부여한다 ( CSS의 전처리 언어 )

ㅡ 변수, 반복문, 가정문  등 이 있다..

ㅡ 브라우저가 읽을 수 있는 언어 : HTML, CSS, JavaScript 가 있다.

ㅡ sass (scss) 는 webpack, node 로 컴파일 해서 쓴다 .( VScode의 사스 확장형으로 사용가능함 )

 

ㅇ VScode 에서  SASS 사용해보기

ㅡ 먼저 2가지 확장자 설치 해보자

 

 

ㅡ main.scss 파일 생성 후  창의 가장 하단부의 [whatching sass] 누르면

동일한 파일명으로 .css파일이 생성된 것이 보임.(자동컴파일됨 ) 

 

ㅡ만약!  Whatch sass가 안뜰경우는  ctrl+shift+p (윈도우) 에서 검색해서 클릭하면 하단부에 아이콘 생성된다.

 

ㅡ Tip !  생성된 map 파일은 디버깅을 위한 것이라서 삭제 해줘도 무관하다.