SCSS) 프로젝트 폴더에 SCSS 설치하기 ... Git clone 방식

 

Sass란 Syntactically Awesome Style Sheets의 약자이다. 

 

CSS pre-processor(전처리기)로서, 복잡한 작업을 쉽게 할 수 있게 해주고, 코드의 재활용성 및 가독성을 높여주어 유지보수를 쉽게 해준다.

 

scss는 sass의 3버전에서 등장한 언어이다. 퍼블리셔에게 익숙한 css와 비슷한 구문을 가지고 있으며, css와 완전히 호환되도록 새로운 구문을 도입한 css의 상위 호환 스타일시트이다.

 

sass기능을 지원하되, css와 거의 같은 문법으로 사용된다는 점에서, 퍼블리셔들에게 각광받는 언어이다.

---

설치 과정)

 

1. git 설치: https://git-scm.com/

Git

---

2. NodeJS LTS 설치: https://nodejs.org/en/

Node.js

 

---

3. SCSS를 설치하고 싶은 프로젝트 폴더를 VSC로 열고

 

---

 

4. terminal에 아래의 코드 입력

 

 

scss 세팅 파일 다운로드 >

git clone https://github.com/parispoly137/scss-boilerplate .

 

 

 

프로젝트 폴더에 npm 설치 >

 

npm i

 

 

 

프로젝트 폴더에서 SCSS감시 모드 시작 >

 

npm run dev

 

---

5. 사용

 

 

[SCSS 예시]

 .example {
        width: 100px;
        li {
           color: blue;
        }
     }

---

만약 기존의 git과 연결된 프로젝트 폴더에서 사용을 원한다면? (clone을 할 수 없을 때)

 

1 > 아래 링크 접속

 

https://github.com/parispoly137/scss-boilerplate

GitHub - parispoly137/scss-boilerplate: from nomadcoders

 

 

2> 아래 이미지의 체크 박스 선택(프로젝트 코드 다운로드)

 

 

 

 

3 > 다운로드 한 폴더의 파일들을 기존 프로젝트 폴더로 이동

 

 

 

이 때, 기존 프로젝트와 이름이 겹치는 파일들이 있을 수 있다.

 

- index.html

 

head 태그 안에 아래 코드만 넣어준다.

<link rel="stylesheet" href="dest/css/styles.css" />

 

- package.json  / package-lock.json

 

다운로드 받은 파일의 내용들을 기존의 파일에 복붙

 

 

 

위와 같이, 기존에 해당 파일이 있다면 기존 파일에서 필요한 내용은 그대로 두고 추가된 내용만 복붙하면 된다.

 

이후에는 npm i 와 npm run dev 로 실행하는 과정은 동일하다.

 

---

 

 

(기존에 git과 연결된 프로젝트가 있는 경우는 번거롭긴 하다. 더 좋은 방법이 있다면 다음에 포스팅할 예정이다.)

 

---

참고)

 

https://nomadcoders.co/css-layout-masterclass/lectures/1392

 

https://intrepidgeeks.com/tutorial/what-is-scss

 

https://heewon26.tistory.com/360