🔗참고자료
→ SASS는 코드를 수정하거나, 코드 조각을 재사용하기 편리하다.
📌 SCSS
/* 여러 줄의
주석이 가능하다
*/
//아니야 한줄씩만 할래
//그려그려
🔻 네임스페이스 속성 중첩
&(앰퍼샌드)
를 사용해 상위 선택자(자신을 감싸고 있는 요소)를 참조할 수 있다.$변수명
$primary-color : pink;
$sub-color: white;
button {
&:first-child {
color: $sub-color;
background: $primary-color;
width: 100px;
}
}
@mixin
@inlude
npx sass
npx sass 변환할폴더/파일 폴더/파일
npx sass
npx sass 폴더/타겟폴더
rm -rf 삭제할폴더/파일
expended
개발자모드compressed
배포모드(압축모드)$ npx sass --style=compressed 폴더/타겟폴더
npx sass --no-source-map
npx sass --no-source-map 폴더/파일
—see
그냥 보는 것, —watch
관찰하는 것npx sass --watch
$ npx sass --watch scss:css
[2023-06-16 13:27] Compiled scss\style.scss to css\style.css.
[2023-06-16 13:27] Compiled scss\test.scss to css\test.css.
Sass is watching for changes. Press Ctrl-C to stop.
npm run
"scripts": {
"sass": "sass scss:css"
"sass-compressed": "sass --style=compressed scss:css"
},
---
npm run sass
npm run sass-compressed
"scripts": {
"start": "run-p sass-watch server",
"sass": "sass scss:css",
"sass-compressed": "sass --style=compressed scss:css",
"sass-no-source-map": "sass --no-source-map scss:css",
"sass-watch": "sass --watch scss:css",
"clear": "rimraf css",
"server": "live-server"
},
"scripts": {
"start": "run-p sass-watch server",
"sass": "sass scss:css",
"sass-compressed": "npm run sass -- --style=compressed",
"sass-no-source-map": "npm run sass -- --no-source-map",
"sass-watch": "npm run sass -- --watch",
"clear": "rimraf css",
"server": "live-server"
},