SCSS
SCSS는 CSS의 전처리 도구 중 하나이며, CSS Preprocessor라는 CSS가 실행되기 전에 실행을 하는 의미를 갖고 있습니다. Sass(SCSS) 외에도 Less, Stylus 등이 있습니다.
SCSS는 CSS가 동작하기 전에 사용하는 기능으로 CSS에서 발생하는 여러 불편함(불필요한 선택자의 과용, 연산 기능의 한계, 구문의 부재)을 해결하는 도구로써 사용됩니다.
1. SCSS 컴파일이란?
컴퓨터에서 프로젝트를 진행할 시, 표준의 CSS 문법이 아닌 CSS의 전처리 도구인 SCSS를 사용하여 프로젝트를 쉽게 진행합니다. 그러나 브라우저에서는 SCSS는 작동하지 않으며, 표준의 CSS 문법만 작동합니다.
그렇기 때문에 SCSS의 문법을 CSS로 변환을 시켜주어야 하며, 이러한 변환 과정을 컴파일(Compile)이라고 합니다. SCSS로 작성한 프로젝트에 컴파일을 진행할 수 있도록 구성 옵션을 작성해야 합니다. 그러면 자동으로 컴퓨터에서 CSS 문법으로 변환시켜주어 브라우저에서 작동이 가능해집니다.
2. SCSS vs Sass
그렇다면 SCSS와 SASS의 차이점은 무엇일까요? Sass는 Syntatically Awesome Style Sheets의 약어로 Sass의 3버전에서 새롭게 등장한 SCSS는 CSS 구문과 완전히 호환되도록 새로운 구문을 도입해 만든 Sass의 모든 기능을 지원하는 CSS의 상위집합입니다.
즉, SCSS는 CSS와 거의 같은 문법으로 Sass 기능을 지원합니다. 보통의 경우 SCSS를 추천하고 있기 때문에 SCSS에 대해 배우는 것으로 합니다.
3. SCSS 환경설정
이번에는 실제로 프로젝트를 생성하여 프로젝트 환경에서 SCSS를 사용하는 방법에 대해 알아보도록 합니다.
3-1. 터미널 명령어 (1)
npm을 통해 package.json 파일을 생성하고 parcel-bundler를 설치해줍니다.
$ npm init -y
$ npm i -D parcel-bundler3-2. package-json 파일
package-json 파일을 오픈하여 script 내에 아래와 같이 parcel 번들러를 이용하여 개발을 할 수 있도록 합니다.
"scripts": {
"dev": "parcel index.html",
"build": "parcel build index.html"
},3-3. index.html 및 main.scss 파일 생성
index.html과 main.scss 파일을 폴더 내에 생성해주고 아래와 같이 index.html 파일 내에 link 태그를 이용하여 main.scss 파일과 연결해줍니다. 또한, 실제로 작동하는지 확인하기 위하여 아래 코드를 입력해줍니다.
1. HTML
<link rel="stylesheet" href="./main.scss" />
<body>
<div class="container">
<h1>Hello SCSS!</h1>
</div>
</body>2. SCSS
$color: royalblue;
.container {
h1 {
color: $color;
}
}3-4. 터미널 명령어 (2)
npm을 통해 개발 서버를 오픈해줍니다.
$ npm run dev