[scss] sass/scss 차이점, 컴파일 방법

/sass와 scss의 차이점은?

기본적으로 안에 들어있는 내용은 같지만 작성하는 문법에서 약간의 차이가 있습니다.

scss는 css문법과 완벽하게 호환이 되는 그런 구문을 가지고 있습니다.

 

① 간단한 차이는 { } (중괄호)와 ; (세미콜론)의 유무입니다.

*sass는 중괄호와 세미콜론을 가지고 있지 않습니다.

 

② 또 다른 차이는 Mixins('믹스인'은 재사용 가능한 기능을 만드는 방식을 의미합니다.)

sass는 = 와 + 기호로 Mixins 기능을 사용했다면

scss는 @mixin과 @include로 기능을 사용했습니다.

 

컴파일 방법

scss는 웹에는 직접 동작할 수 없습니다.

최종으로는 표준 css로 동작해야 하며, 전처리기로 작성 후 css로 컴파일해야 합니다.

 

간단한 scss 코드는 컴파일러를 설치하는 것이 부담될 수 있기 때문에

https://www.sassmeister.com/를 추천드립니다.

페이지 접속 후 sass나 scss 문법으로 코딩하면 css문법으로 실시간으로 변환됩니다.

 

두 번째는 Parcel입니다.

번들러 Parcel은 굉장히 단순하게 컴파일할 수 있습니다.

 

1. 먼저 Parcel 설치

$ npm install -g parcel-bundler

2. 프로젝트에 sass 컴파일러(node-sass)를 설치

$ npm install --save-dev node-sass

3. html에 link로 scss파일을 연결해주세요.

<link rel="stylesheet" href="scss/main.scss">

$ parcel index.html

or

$ parcel build index.html