Language/CSS

[SCSS] HTML에 SCSS 적용하는 법

arajo 2022. 12. 23. 23:09
728x90

CSS를 사용하다보면 각종 클래스 혹은 태그들을 나열하느라 시간이 오래 걸리고 반복적으로 클래스와 태그들을 적어줘야 하기 때문에 작업을 하다보면 굉장히 비효율적이란 느낌이 든다.

또한 오타가 발생했을 때 오타를 찾기도 쉽지가 않다. 이러한 이유들로 SCSS를 사용한다.

SCSS를 사용하면 CSS 코드가 훨씬 간결해진다.

 

HTML에 SCSS 적용하는 방법

  1. 툴에 프로젝트를 생성한다.
  2. 해당 프로젝트 안에 'index.html'파일을 만들어 준다.
  3. 해당 프로젝트 안에 'css'라는 폴더를 생성해 준다.
  4. css 폴더 안에 style.css와 style.scss 파일을 생성한다.
  5. index.html에 css코드를 불러온다.

→ scss에 작성한 내용이 자동으로 작성되도록 설정하면 scss는 따로 불러오지 않아도 된다.

css에 scss 내용이 자동으로 작성되게 하는 방법

툴에서 터미널을 열어 명령어를 입력한다.

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 파일이 생성된 걸 확인할 수 있다.

 

테스트

1. index.html에서 div 박스를 하나를 만들고 그 안에 h3 태그로 글을 하나 써준다.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>SCSS 사용해보기</title>

        <link rel="stylesheet" type="text/css" href="css/style.css" />
    </head>
    <body>
        <div class="box">
            <h3>흠냐리</h3>
        </div>
    </body>
</html>

2. style/scss에 스타일을 작성하고 저장한다.

.box {
    background-color: greenyellow;
    h3 {
        color: deeppink;
    }
}

 

→ style.css 파일을 열어보면 style.scss 파일에 입력한 내용이 적혀 있는 걸 볼 수 있다.

(scss파일에서 .box를 한번만 입력했는데 css파일에서 .box가 2개 입력되어 있는 것을 확인할 수 있다.)

 

적용된 웹페이지 화면