[Sass] Sass 설치, 컴파일 명령어

🍰 설치하기

Node.js 설치 완료 후 sass 패키지를 설치한다. 실습에서는 로컬로 설치했다.

npm i -D sass

• -D는 --save-dev의 약자: Sass 패키지를 개발 의존성(devDependency)으로 설치한다는 의미.
• 개발 의존성: 프로젝트의 개발 단계에서만 필요한 패키지 설치. 프로덕션 환경에서는 이 패키지들 필요 없음.
• 목적: 테스트, 빌드, 도구, 린팅, CSS 전처리기 등 개발 중에만 필요한 도구들을 관리 할 때 사용함.
• -D 사용해서 설치 시 package.json 파일의 devDependencies 항목에 추가됨.

=> package.json, dependencies가 뭐지? https://kellyjs.tistory.com/33

설치 후 파일 두 개와 폴더가 생김

🍰 컴파일 명령어

: 웹 브라우저는 Sass 파일 해석할 수 없음 => 명령어를 통해 CSS 파일로 변환 처리함

명령어를 편하게 사용하기 위해 package.json 파일의 scripts 항목에 Sass CLI 명령어 등록함

{
  "scripts": {
    "dev": "live-server",
    "sass": "sass src/scss/main.scss src/css/main.css",
    "update": "sass --update src/scss/main.scss src/css/main.css",
    "watch": "sass --update --watch src/scss/main.scss src/css/main.css",
    "sass-all": "sass src/scss:src/css",
    "update-all": "sass --update src/scss:src/css",
    "watch-all": "sass --update --watch src/scss:src/css",
    "compressed": "sass src/scss:src/css --style compressed",
    "no-map": "sass src/scss:src/css --no-source-map",
    "clean": "rm -rf src/css"
  },
  "devDependencies": {
    "sass": "^1.77.2"
  }
}

🍴 scripts 섹션에 사용한 플래그(수업 때 설정한 명령어들)

• NPM 명령어로 실행할 수 있는 다양한 스크립트 정의
• npm run <script-name>을 통해 실행
• "sass" - scss파일을 컴파일하여 css파일로 변환 => 원투원 모드(1대1로 컴파일)
• "--update" - 변경된 사항만 업데이트
• "--update --watch" - 파일을 감시하여 변경될 때마다 src/css/main.css 파일로 컴파일
• "--update --watch 폴더:폴더" - src/scss 디렉토리 내의 모든 SCSS 파일 컴파일 
• "--update 폴더:폴더" - src/scss 디렉토리 내의 모든 SCSS 파일 업데이트
• "--update --watch 폴더:폴더" - src/scss 디렉토리 내의 모든 SCSS 파일 감시, 변경될 때마다 대응되는 src/css 디렉토리에 컴파일
• "--style compressed" - CSS를 압축된 형태로 만듦
• "--no-source-map" - 소스 맵을 생성하지 않고 컴파일
• "clean" - src/css 디렉토리 삭제

자세한 명령어 확인하기 => https://sass-lang.com/documentation/cli/dart-sass/

🍴 source-map

: 웹 개발에서 사용되는 파일 변환 과정에서 원본 소스 코드와 변환된 코드 간의 대응 관계를 맺어주는 파일

주요 기능

1. 디버깅 - 변환된 코드에서 원본 소스 코드의 라인 및 컬럼 정보 확인 가능
2. 속도 최적화 - 브라우저가 원본 코드를 다운로드하여 디버깅 진행 가능
3. 보안 - 원본 코드 노출 없이 디버깅 가능