1. Git 설정
Git repositories 생성
- 이름 설정 후 Add.gitignore 체크, template node 설정 후 repository 생성.
Git과 local 연결
- HTTPS 의 url복사.
- 명령 프롬프트에 git clone url
- 로컬 컴퓨터에 폴더 생성 !
2. node-sass
node-sass 설치
- vs code 에서 파일 열고 terminal 열고 npm init 으로 pakage-json 파일 생성.
- npm i node-sass 입력 후 sass 설치.
↑ 파일 최종 모습.
✨node-sass 설정
node-sass를 사용하기 위해서는
pakage-json에 "scripts"에 코드를 추가를 해야만 사용이 가능하다.
https://www.npmjs.com/package/sass
-> Command Line Interface 참고
node-sass [options] < input > [output]
예시 // node-sass style/main.scss ./style.css
-
script 에 "sass": "node-sass style/main.scss ./style.css" 작성
→ style디렉토리에 있는 main.scss를 style.css로 변환한다. -
terminal에 npm run sass 입력.
css파일 생성 완료!
더불어 scss파일이 css로 변환 완료~!
3. npm script 업데이트
이 표시는 5개의 변화가 있었다는 뜻. // 하지만 node_modules 파일이 대거 생성이 됐는데 변화가 5개만 일어났다 함..?
이유는 .gitignore에서 #Dependency directories에 node_modules파일이 속해 있음. 이 뜻은 node_modules를 무시하고 관리하지 않겠다! 라는 뜻이다.
의미있는 변화를 알아채기 위해서는 이게 좋다..
//따라서 git에서 파일 생성시 Add.gitignore을 체크해주는 것이 좋다.
sass파일을 자동 업데이트
https://www.npmjs.com/package/sass
-> Command Line Interface의 options 참고
- -w, --watch : "관련된 디렉토리나 파일을 다 지켜보겠다."
→ scss 파일에 변경사항이 생길때마다 반영 해줌. - -r, --recursive : scss 파일을 쪼개서 관리할텐데 그때 변경사항이 생길때마다 관련된 모든 파일에 변경사항 반영 해줌.
이 옵션을 어디에 넣나?
node-sass [options] < input > [output]
예시 // node-sass -w -r style/main.scss ./style.css
또는 node-sass -wr style/main.scss ./style.css
위와 같이 package.json에 넣어주고 다시 npm run sass 를 해준다.
main.scss에 작성 후 저장만 해주면 css에 실시간 반영!
commit 남기기
+버튼 눌러 메세지 남기기 (이모지를 리용해 남기면 쉽게 어떤 내용인지 파악 가능하다.)
git log 를 통해 남긴 commit확인
4. Prettier & SCSS lint 설정
SCSS lint
scss-lint → scss문법에 맞게 오류를 찾아준다.
- 확장프로그램 scss-lint 설치
- root에 .scss-lint.yml 파일 생성 후 올려주신 자료를 파일에 넣기.
Prettier
-
.prettierrc 파일 생성
-
Ctrl + , 로 setting열어서 format on save, prettier config 검색해서 체크박스 체크되어 있는지 확인.
-
확장 프로그램에서 prettier 검색 후 "editor.defaultFormatter": "esbenp.prettier-vscode" 를 복사하여
다시 setting로 돌아가 open setting 아이콘 클릭하면 에디터 설정에 관련된 setting 값들이 나온다. 여기에 복사한 "editor.defaultFormatter": "esbenp.prettier-vscode"를 넣어 준다.
-
.prettierrc 파일로 가서 아래 사항을 설정해 준다.
{
"semi": "false", //자바스크립트에서 세미콜론 NO
"singleQuote": "true", //singleQuote 사용
"endOfLine": "lf", //파일 저장시 항상 마지막에 빈 줄 생성
"tabWidth": 2, //tab은 2칸
"useTabs": "false"
}마지막으로 .scss-lint.yml와 .prettierrc를 commit 해주기 //🔧 Add linter configs
5. Sass Q&A
- Sass란?
Syntactically awesome stylesheet
css preprocessor - css 를 좀더 편하게, 전에 처리할수 있게끔 해주는 전처리기 이다.
css 는 선언형으로 되어 있어 불편함이 있을 수 있지만 SCSS는 프로그래밍 문법적인 요소가 있다. 변수 선언도 가능하며 for문도 사용가능하여 편하다.
//예를 들어 아래와 같이 그리드 시스템을 만든다 할때 간단한 코드로 구현가능.
//css
.col-1 {
width: 105px;
}
.col-2 {
width: 210px;
}
.col-3 {
width: 315px;
}
...//SCSS
$colums: 12;
$gutter: 30px;
$unit: 75px;
@for $i from 1 through 12 {
.col-#{$i} {
width: $i * ($unit + $gutter);
}
}- Sass 와 SCSS의 차이
Sass가 SCSS 보다 문법 적으로 더 간결하다.
SCSS는 말그대로 CSS 문법과 굉장히 유사하다. // { }와 ; 有
우리나라에서는 SCSS 가 압도적으로 많다.
//Sass
$base-font: 20px
p
font-size: $base-font
line-height: 1.5//SCSS
$base-font: 20px;
p {
font-size: $base-font;
line-height: 1.5;
}