[SCSS] 설치

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의 장점은 빠르고 재사용이 가능하다는 것이다. 또 마크업 언어보단 프로그래밍 언어에 더 가까워서 한 번 익숙해지면 프로그래밍과 좀 더 친해질 수 있을 것이다. 무엇보다 작업시간이 빨라지는 것, 그게 제일 중요한 것 같다. 빨리 익숙해져야 겠다.

[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