내용이 많아질 수록 css를 작성하기 복잡해진다. 이때, scss를 사용하면 조금 더 손쉽게 스타일을 적용할 수 있다.
파일 만들기
일단 간단하게 예시를 들기 위해서 총 3개의 파일을 만들어준다.
- index.html
- css 폴더
- style.css
- syle.scss
파일들을 생성했다면 index.html 파일에 css를 연결해준다.
scss 파일이 아닌 css 파일이여야 한다! html은 scss 파일을 읽지 못한다.
scss를 css로 변환하기
우리는 scss 파일에 스타일을 작성해준다. 하지만 그냥 작성하고 저장하면 css 파일은 백지이다. 즉, 가만히 그냥 두면 변환은 일어나지 않는다.
우리는 scss 파일을 css 파일로 변환을 해줘야 한다. cmd창에 다음과 같은 명령어를 작성한다.
npx sass --watch 폴더명/scss파일명 폴더명/css파일명
npx sass --watch css/style.scss css/style.css
여기서 --watch는 우리가 scss파일에 작성한 코드를 저장하면 자동으로 css 파일로 변환해줘~ 라는 명령어다.
해당 명령어를 작성하지 않으면 scss 파일을 저장하고, cmd 창에서 수동으로 변환 명령어를 계속 입력해야 한다. 매번 그러기에는 귀찮으니 다음 명령어를 꼭 같이 넣어도록 하자.
참고로 더이상 변환을 시키고 싶지 않다면, cmd 창에서 control+C를 통해 프로세스를 종료시키도록 하자.
Comments