27. [CSS] SCSS 설치 및 기초

이번 포스팅에서는 CSS의 전처리엔진인 SCSS/SASS에 대해서 알아보겠습니다.

 

▶ SCSS/SASS : CSS의 전처리 엔진

CSS를 더욱 쉽게 작성하게 끔 해주는 tool

 

▷ SASS 와 SCSS의 차이점 - SCSS가 기존의 CSS와 문법적으로 유사하므로 SCSS에 대한 학습을 진행하겠습니다. 

SASS : 괄호, 세미콜론 X 
SCSS : 괄호, 세미콜론 O 

 

SCSS로 작성된 문법은 반드시 CSS로 변환하여 HTML 파일에 첨부해야 합니다. 

웹브라우저는 오직 [HTML, CSS, JavaScript] 3가지의 언어만 읽을 수 있기 때문입니다.

 

그럼 SCSS/SASS로 이뤄진 파일은 반드시 컴파일을 해야 하는데 컴파일 하는 방법에 대해서 알아보겠습니다. 

 

SCSS 설치법

[수동 설치법]

https://www.sassmeister.com/

SassMeister | The Sass Playground!

URL에 접속하면 다음과 같은 GUI가 나옵니다. 

왼쪽에는 SCSS 코드를 붙여넣으면 자동적으로 오른쪽에 CSS가 나옵니다. 

하지만 이 방법은 매번 코드를 수정할 때 마다 코드를 복붙해야 하는 번거로움이 존재합니다. 

 

 

[자동 설치법]
https://scout-app.io/

Scout-App, the easiest way to use Sass!

1. Input Folder에 SCSS 가 있는 폴더의 경로를 넣어준다. 

2. Output Folder에 SCSS를 컴파일 완료한 CSS 파일의 목적지를 지정해준다. 

3. 왼쪽 상단에 play 버튼을 누른다. 

4. Enviroment에 설정을 Expanded로 한다. -> CSS 코드가 펼쳐져서 보여짐

5. SCSS 파일을 저장을 할 때 마다 CSS 파일이 업데이트 된다.