SCSS를 적용할 프로젝트 파일을 열고 cmd 터미널에 다음과 같이 입력한다.
npx sass
그리고 packages 이름이 sass 인 것을 확인하고 y를 누른다면 설치가 완료된다.
컴파일
1. 본인이 작업할 scss 파일과 css 파일 두 개를 생성한다. 나는 style.css와 style.scss를 생성했다.
2. html 파일을 생성하고 css 파일을 stylesheet link 한다.
<html lang="ko">
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>hello, wolrd</h1>
</body>
</html>
3. cmd 터미널에 아래와 같이 입력하면 watch 명령어로 인해 scss 파일이 css 파일에 컴파일 되며 자동으로 css 형태로 소스를 업데이트 시켜준다.
npx sass --watch 경로/style.scss 경로/style.css
4. scss 파일에 코딩하면 완료!
body {
background-color: tomato;
h1 {
color: white;
}
}
body {
background-color: tomato;
}
body h1 {
color: white;
}
/*# sourceMappingURL=style.css.map */
SCSS의 장점은 빠르고 재사용이 가능하다는 것이다. 또 마크업 언어보단 프로그래밍 언어에 더 가까워서 한 번 익숙해지면 프로그래밍과 좀 더 친해질 수 있을 것이다. 무엇보다 작업시간이 빨라지는 것, 그게 제일 중요한 것 같다. 빨리 익숙해져야 겠다.
'TIL LIST > HTML, CSS' 카테고리의 다른 글
[HTML, CSS] 글자 백그라운드에 svg 파일을 삽입하는 법 (0) | 2022.07.20 |
---|---|
[CSS] 미디어 쿼리 (0) | 2022.06.29 |
[CSS] grid, 반응형 웹페이지 (0) | 2022.06.25 |
[CSS] grid, 격자 (0) | 2022.06.23 |
[CSS] 좌측 정렬에서 마지막만 우측 정렬하는 법 (0) | 2022.06.17 |