[SCSS] HTML에 SCSS 적용하는 법 / how to apply scss to html

안녕하세요.
디자인도 하고, 개발도 하는 '디발자 뚝딱'입니다.

이번 포스팅에서는 HTML에 SCSS 적용하는 방법에 대해 다뤄보겠습니다.
CSS를 사용하다보면 각종 클래스 혹은 태그들을 나열하느라 시간이 오래 걸리죠.
그리고 반복적으로 클래스와 태그들을 적어줘야 하기 때문에 작업을 하다보면 굉장히 비효율적이란 느낌이 듭니다.

또 오타가 발생했을 때 오타를 찾기도 쉽지가 않죠?
이러한 이유들로 개발자들이 퍼블리싱 할 때 SCSS를 사용하는데요.

SCSS를 사용하다보면, CSS 코드가 훨씬 간결해진답니다!
어떻게 간결해지는지는 이 과정을 따라하다보면 아실 수 있어요.
순서대로 설명글과 이미지를 보면서 따라해 주세요! 어렵지 않습니다 :)

HTML에 SCSS 적용하는 방법

1. VSCODE에서 프로젝트를 생성해주고, 해당 프로젝트 안에 'index.html'파일을 만들어 주세요.

프로젝트 안에 index.html 생성

2. 해당 프로젝트 안에 'css'라는 폴더를 생성해 줍니다.

프로젝트 안에 'css' 폴더 생성

3. css 폴더 안에 style.css와 style.scss 파일을 생성해 주세요,

'css'폴더 안에 css파일과 scss파일 생성

4. index.html에 css코드를 불러볼게요.

link 태그를 사용하여 css를 불러왔습니다.
scss에 작성한 내용이 자동으로 css에 작성되도록 할 거라서 scss는 따로 불러오지 않아요.
그렇다면, css에 scss내용이 자동으로 작성되게 하려면 어떻게 해야 할까요? 5번으로 넘어가봅시다!

index.html에서 css파일 import

5. vscode에서 터미널을 열어 명령어를 입력합니다. (터미널은 단축키 [ Ctrl + ` ]로 열 수 있습니다.)

npx sass --watch css/style.scss css/style.css

명령어를 설명해드리자면,
- npx : Node Package eXecute의 약자. 즉, 노드 패키지를 실행하라는 뜻입니다.
- --watch : 소스에 변형이 일어날 때마다 자동으로 컴파일을 시켜주는 명령어입니다.
- css/style.scss css/style.css : 'css폴더 안의 style.scss가 css폴더 안의 style.css파일로'라는 뜻입니다.


터미널에 아래의 내용이 보이면 정상적으로 style.scss의 내용이 style.css로 컴파일 된다는 뜻입니다.

컴파일 성공

그리고 css폴더 안을 보시면, 이미지처럼 style.css.map 파일이 생성된 걸 확인하실 수 있을 거예요!

style.css.map 확인하기

6. 완료! 자 테스트를 해볼까요?

먼저 index.html 안에 이렇게 div 박스를 하나 만들어서 그 안에 '뚝딱 가즈아!'를 입력할게요.

index.html에 div와 h2를 작성해주었다.

그다음, style.scss에 스타일을 작성해 주겠습니다. 그리고 저장해 주세요!

scss파일 작성

style.css파일을 열어보면 style.scss파일에 입력한 내용이 적혀 있는 걸 보실 수 있을 거예요.
scss파일에서 .box를 딱 한번만 입력했는데요, css파일에서 .box가 2개 입력된 거 보이시나요?

scss파일의 내용이 css파일에 보여지고 있다.

웹에서는 이렇게 보여지고 있어요.
이 과정을 반복적으로 따라하시다보면 scss 적용하는 방법이 어렵게 느껴지지 않으실 거예요 :)

scss가 적용된 웹 화면