Sass(SCSS) Pre-processor(전처리기)

안병욱·2022년 2월 16일
0

Node.js 설치 (Parcel,dart-scss 동일)

SCSS를 사용하기 위해선 Node.js가 필요하다.


우리는 안정화 되어있는 LTS를 기준으로 하겠다.
LTS가 설치가 되면 제대로 되었는지 node -v 를 통해 확인을 한다.
또한 npm(node package manager)까지 설치 되었는지 확인한다.
- npm은 node가 설치되면 같이 설치가 된다.

확인이 되었다면 SCSS전처리기 연결을 시작해보겠다.


Parcel 이란?

웹 애플리케이션 번들러 Parcel 활용
[참고 : Parcel 이란? 2017년 여름에 등장한 Parcel.js는 새로운 웹 애플리케이션 번들러 입니다.
기존에 많이 사용하던 Webpack이나 Gulp와 다르게 별도 설정 없어도 빠르게 빌드가 가능합니다]
1) webscss 폴더 생성 - VSCode에서 webscss 폴더 지정함 - 터미널 - 새터미널 - cmd 지정함
2) webscss 폴더 안에 index.html 소스 코딩
[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>
   <!-- 프로젝트 안에 있는 HTML 파일에 link 태그로 Sass(SCSS) 파일을 연결해 줍니다. --> 
   <link rel="stylesheet" href="./common.scss">
</head>
<body>
   <div class="container">
       <div class="box"></div>
   </div>
</body>
</html>

3) webscss 폴더 안에 common.scss 소스 코딩
[common.scss 소스 코딩]

.container {
  $size: 100px;
  .box {
    width: $size;
    height: $size;
    background: orange;
  }
}

4) webscss 폴더 안에서 전역(g)으로 Parcel을 설치합니다.
C:\webscss>npm install -g parcel-bundler

5) Sass(SCSS) 컴파일러(node-sass)를 설치합니다.
C:\webscss>npm install --save-dev node-sass

6) npm(Package Manager : 관리) 구동 초기화를 해줍니다.
Microsoft Windows Version 10.0.19042.1466 Microsoft Corporation. All rights reserved.

C:\webscss>npm init -y

npm init -y 를 하면 package.json 파일이 생성이된다.

C:\webscss>npm install --save-dev parcel-bundler 를 설치 해준다.

7) npx(Package Runner : 실행)로 index.html 파일을 parcel 컴파일 후 실행해 줍니다.
C:\webscss>npx parcel index.html 를 실행해준다.

이런씩으로 Built in이 되면 정상적으로 작동이 된 것이다.

8) SCSS 실행 확인
"C:\webscss>npx parcel index.html 텍스트" 글자 밑에 있는
Server running at http://localhost:1234 글자를
Ctrl키 누르고 http://localhost:1234 마우스 왼클릭하고, 웹브라우저로 확인합니다.

9) webscss 폴더 안에 common.scss 소스 수정 코딩

[common.scss 소스 수정 코딩]

.container {
  $size: 100px * 2;  // 이부분만 수정 코딩함 : size 값을 2배로 키워줌
  .box {
    width: $size;
    height: $size;
    background: orange;
  }
}

여기까지 작성이 되었다면, scss가 자동으로 css로 변경이 된다.
변경된 사항을 확인하려면

dist파일을 확인해보면 scss가 css로 변환이 되어 작성이 되어있다.
위의 코드가 어떻게 바뀌었는지 보자!

SCSS가 CSS로 바뀌었는걸 확인 할 수 있다.


Dart.scss

요즘에는 Dart 언어로 구현된 Dart Sass 를 주로 활용합니다. Dart Sass 는 Ruby 보다 빠르고 C++와 거의 비슷한 속도를 제공한다고 합니다. Dart Sass 도 npm 을 통해 설치할 수 있습니다.

1) npm(노드 패키지 매니저) = npm 은 Node.js 의 기본 패키지 관리자이기에,
Node.js 를 설치해주어야 합니다. [ 참고 웹사이트 https://www.npmjs.com/package/sass ]
npm 은 공식적으로 자바스크립트 프로그래밍 언어를 위한 패키지 관리자이지만,
Sass(SCSS)와 같은 CSS 전처리기의 컴파일에도 활용되고 있습니다.
(c) Microsoft Corporation. All rights reserved.
C:\Users\starh>npm -v
6.14.15 -> npm 버전확인

2) Sass 설치
C:\Users\starh> npm install sass -g

C:\Users\starh> sass --version (또는 npm show sass version)
sass --version 에러가뜬다면 npm show sass version 을 입력해주면된다.

3) Sass(SCSS) 컴파일 및 웹브라우저 실행 확인
우선 webscss2 폴더를 생성하고, 그 폴더 안에 common.scss 파일을 만듭니다.

4) Sass(SCSS) 컴파일 적용
이제 커맨드 창에 sass <변환할 scss 파일명> <변환될 css 파일명> 을 입력합니다.
C:\webscss2> sass common.scss common.css

여기까지 진행이 되었다면 정상적으로 구동이 된다.

5) Sass(SCSS) watch(감시) 옵션 적용
매번 수동으로 Sass 를 활용하여 컴파일 명령을 처리하는 것이 번거롭기에,
--watch라는 플래그를 넣어 Sass 가 해당 파일을 감시하게 만들 수 있습니다.
즉, 예시의 common.scss 파일에 변화가 생기면 알아서 자동으로 컴파일을 처리해 줍니다.
감시를 취소하려면 Ctrl+C 를 입력하면 됩니다.

[문법 예시 : 파일]
C:\webscss2> sass --watch common.scss common.css

① webscss2 폴더 안에 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> 
 <!-- 프로젝트 안에 있는 HTML 파일에 link 태그로 css 파일을 연결해 줍니다. --> 
 <link rel="stylesheet" href="./common.css"> 
</head> 
<body> 
 <div class="container"> 
 <div class="box"></div> 
 </div> 
</body> 
</html> 

② webscss2 폴더 안에 common.scss 파일 소스 코딩

container { 
 $size: 100px * 2; 
 .box { 
 width: $size; 
 height: $size; 
 background: orange; 
 } 
}

위에 문법 예시(폴더) 형식으로 처리하면, scss 폴더 내 .scss 파일이 변경될 때마다
.css 파일을 생성(또는 수정) 처리해 줍니다. 감시를 취소하려면 Ctrl+C 를 입력하면 됩니다.
참고로, --watch 등 옵션처럼 끼워 넣어 활용하는 것을 플래그 삽입이라고 합니다.
[ 플래그 참고 웹사이트 https://sass-lang.com/documentation/cli/dart-sass ]

5) CSS 파일 생성 확인

※ Sourcemap(소스맵) 파일 이해 : 예시에서 common.css.map 파일을 봅니다.

Sourcemap(소스맵) 파일은 컴파일된 소스를 원본 소스로 맵핑해 주는 역할을 합니다.
말그대로, 원래 소스가 어떠한지 보여주는 지도와 같은 역할을 한다고 할 수 있습니다.
개발자는 컴파일 되기 전인 원본 소스를 보고 작업을 합니다. 하지만 브라우저는 컴파일이 된
소스를 보게 됩니다. 그러다보니 브라우저에서 소스를 확인하며 디버깅하기가 번거롭습니다.
하지만 소스맵이 있으면 맵핑이 되기 때문에 CSS 가 압축 되어있거나 모듈로 쪼개져 있어도
원본 소스의 내용을 볼 수가 있습니다.

즉, 다음과 같이 .map 파일이 있으면 웹브라우저에서 .scss 파일을 볼 수 있습니다.

Sourcemap(소스맵) 파일은 Sass 뿐만 아니라 Webpack 등 번들링 도구에서도 제공합니다.
다만, Sourcemap(소스맵) 파일은 개발자 참고용 파일이고, 배포 시에는 필요 없으므로,
다음과 같이 명령어를 처리해 주면, 자동으로 생기지 않게 설정하는 것도 가능합니다.
즉, Sass 명령어에 --no-source-map 플래그 명령 처리를 하면 소스맵이 생성되지 않습니다.
C:\webscss2> sass --no-source-map common.scss common.css
참고로, 앞서 npm 이 아닌 다른 패키지 매니저(Chocolatey, Homebrew 등)를 통한 Sass 설치도 가능합니다. 다만, npm 은 자바스크립트를 위한 패키지 매니저이며, 웹 개발 중에 활용이 많이 되는 도구이기에 npm 으로 활용해 보았습니다.

0개의 댓글