CSS/Sass(SCSS)

Sass(SCSS)란?

제이널 2022. 1. 14. 14:43

CSS는 배우기 쉽고 재밌을 수 있습니다.

하지만, 스타일 시트의 규모가 점점 커지고 있으며, 그로 인해 복잡해지고, 유지보수를 더 어렵게 만들고 있습니다.

여기에 CSS 전처리기(preprocessor)가 도움을 줄 수 있습니다.

 

 

 

1. Sass(SCSS)?

Sass(SCSS)는 아직 CSS에 없는 기능들을 가지고 있는데, 예를 들어 nesting, mixins, inheritance, 강력하고 유지보수가 가능한 CSS를 작성하는 데 도움이 되는 기능들이 있습니다.

 

Sass를 사용하면 Sass 파일을 전처리하고, 웹 사이트에서 사용할 수 있는 일반적인 CSS 파일로 저장됩니다.

 

가장 직접적인 방법은 터미널을 사용하는 것입니다.

Sass가 설치되어 있으면, sass 명령어를 통해 Sass 파일을 CSS로 컴파일할 수 있습니다.

 

또한, --watch 옵션을 실행하면, Sass 파일의 변경사항을 감지하고 파일을 저장할 때마다, 자동으로 컴파일 할 수도 있습니다.

sass --watch input.scss output.css

 

2. SCSS 설치

먼저, 프로젝트 폴더를 만들고 npm을 초기화하고, parcel-bundler를 설치해줍니다.

mkdir scss-test && cd scss-test

npm init -y
npm i -D parcel-bundler
  • npm: node package manager로서, node의 패키지를 관리해주는 프로그램입니다. npm 명령어를 사용하려면 nodejs를 설치해야 합니다.
  • parcel-bundler: 웹 사이트를 만들려면 HTML, CSS, JS 만으로도 가능하지만, 사이트의 규모가 커질수록, 모듈과 서드 파티 모듈들을 포함해야 할 수 있습니다. 이런 모듈들을 하나로 묶어둔 것이 번들러이며, 그 중 하나가 parcel이라는 번들러입니다. parcel 번들러는 다른 번들러에 비해 설정이 쉽고 간편하다는 특징이 있습니다.

 

npm init 명령어로 생성된 package.json 파일을 열고 아래 내용을 추가합니다.

{
  ...,
  "scripts": {
    "dev": "parcel index.html",
    "build": "parcel build index.html"
  },
  ...,
}
  • parcel 명령어를 통해, 브라우저에서 오픈할 수 있도록 설정합니다.

 

다음으로 index.html, main.scss 파일을 만들어서 작성합니다.

 

index.html

<!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>Document</title>
  <link rel="stylesheet" href="./main.scss" />
</head>

<body>
  <div class="container">
    <h1>Hello SCSS!</h1>
  </div>
</body>

</html>

 

main.scss

.container {
  h1 {
    color: red;
  }
}

 

마지막으로, npm 명령어를 사용해 서버를 띄워주면 완료입니다.

PORT=8080 npm run dev