SASS 입문! SASS 개발 환경 설정

1. vs code 확장프로그램에 live sass compiler 검색 -> 설치 (3버전 말고 5버전으로..)

 

2. vs code 하단에 Watch Sass 클릭하면  scss파일로 저장한것들은 자동으로 css파일로 변환된다.

 

3. html 파일에 변환된 css파일을 link로 걸어주면 된다.

확장자가 map 인 파일은 크롬개발자도구 디버깅을 위한 파일이다.

 

코드는 .scss 파일에 짜고,  html 파일에는 css파일을 연결시킨다.

(브라우저는 scss파일 인식할수 없으니까..)

 

 

SASS는 변수를 설정할수있고, 변수간 연산이 가능하다.

(CSS에도 var, calc로 할수 있지만 변수명앞에 '--' 를 쓴다거나 var이나 calc를 입력해야하는 번거로움이 있다.)

 

nesting  ,  @extend=> css 관리쉽다. 확장성 좋다. 가독성 좋아 이해쉽다.

@mixin x @include => 함수처럼 파라미터를 넣어 사용할 수 있다..!!