개요

SCSS란 CSS를 조금 더 편리하게 사용할 수 있게 해주는 CSS 전처리기를 의미한다.

시초가 SASS이다. 그런데 SASS가 기존의 CSS와 호환이 되지 않자 호환되는 방식으로 다시 나온게 SCSS이다. 즉, SCSS는 기존의 CSS와 완전히 호환된다. 또한 SCSS와 SASS는 문법만 조금 다르다.

우리가 다룰 것은 SCSS이다. SCSS가 SASS를 보완해서 나온 것이기 때문..

SCSS와 SASS의 차이

SASS는 @를 사용한다. 다만 SCSS는 동일한 기능을 위해 =나 +, -를 이용한다.

컴파일

SCSS로 작성한 코드는 CSS 전처리기를 통해 CSS코드로 변경된다. 이를 SCSS를 컴파일한다고 한다. 사실 우리가 SCSS, SASS라고 말할때는 이 문법을 처리할 수 있는 컴파일러를 일컫는 것임.

프로젝트 생성

1. npm init -y 를 통해 npm 프로젝트를 생성해주자. npm프로젝트 설정파일인 package.json이 생성된다.
2. npm i -D parcel-bundler 를 통해 번들러를 설치해준다. 이게 무엇인지는 나중에 알아보자. gradle, maven같은 npm만의 패키지 관리자인 듯 하다.

이런 프로젝트 구조가 생성된다.

{
  "name": "workspace_scss",
  "version": "1.0.0",
  "description": "<h2>SCSS를 공부한 내용입니다.<h2>",
  "main": "index.js",
  "scripts": {
    "test": "echo \\"Error: no test specified\\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "parcel-bundler": "^1.12.5"
  }
}

pakage.json 을 보면 위처럼 parcel-bundelr가 설치되어 있는 것을 알 수 있다.