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로 변환 완료~!
이 표시는 5개의 변화가 있었다는 뜻. // 하지만 node_modules 파일이 대거 생성이 됐는데 변화가 5개만 일어났다 함..?
이유는 .gitignore에서 #Dependency directories에 node_modules파일이 속해 있음. 이 뜻은 node_modules를 무시하고 관리하지 않겠다! 라는 뜻이다.
의미있는 변화를 알아채기 위해서는 이게 좋다..
//따라서 git에서 파일 생성시 Add.gitignore을 체크해주는 것이 좋다.
https://www.npmjs.com/package/sass
-> Command Line Interface의 options 참고
이 옵션을 어디에 넣나?
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에 실시간 반영!
+버튼 눌러 메세지 남기기 (이모지를 리용해 남기면 쉽게 어떤 내용인지 파악 가능하다.)
git log 를 통해 남긴 commit확인
scss-lint → scss문법에 맞게 오류를 찾아준다.
.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
//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
$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;
}