SCSS
- SCSS 세팅
- extension
- prettier
- scss-lint
- live server
- Git 세팅
- new repository
- 중간에 add.gitignore node 선택
- terminal에서 관리할 폴더로 ls 이동 후
- github 페이지에 code 누른 뒤 링크 복사
- 터미널에 git clone 복사한주소 입력 후 Enter
- Node, sass 설치
- 노드 설치 후
- 터미널에서 npm init -y 엔터
- 구글에 npm node-sass 검색

- 터미널에 node-sass 인스톨
- npm node-sass 홈페이지에서 command line interface 검색 후 example 복사

- package.json 의 script에 두가지 추가하기 node-sass 항목은 직접 타이핑하고, 밑의 sass는 사이트꺼 복붙

- vscode에 styles라는 폴더 만들고, 폴더 내에 main.scss파일 만들기
- root에 index.html 만들고 style.css 링크만 시키기
- 아래처럼 sass경로를 styles폴더 안에 있으니 styles/main으로 바꾸고, 뒤에 style.css는 style.css가 있을 root로 경로 변경

- main.scss에서 아무 css나 테스트로 적용 후, 터미널로 npm run sass 로 테스트 후 ,style.css에 자동 적용 되었는지 확인
- -w (관련된 파일 지켜보는 기능/scss에 작성하고 매번 npm run sass를 안해도 자동으로 변환되는 기능), -r(모든 변화를 인지하는 기능) package.json에 추가하기

- Prettier & SCSS lint 설정
"editor.defaultFormatter": "esbenp.prettier-vscode",


{
"semi": false,
"singleQuote": true,
"endOfLine": "lf",
"tabWidth": 2,
"useTabs": false
}
** Ruby가 설치되어야, scss_lint가 작동함.
1. 터미널에서 brew install ruby 로 ruby 설치
2. gem install scss_lint 실행하여 lint 설치