왜 이프로젝트에서 SCSS를 사용하나?
그전까지 프로젝트를 진행하면서는 styled-components를 많이 사용하였다. 많이 사용했던 이유 또한 제일 처음 배울 때에 styled-components로 작업을 많이해서 익숙했었다.
하지만 익숙함에서 벗어나 이번 프로젝트는 공부목적이기도 하고, css를 좀더 공부해보고싶었다! 그러다 전처리기인 Sass를 적용하면 css를 좀더 모듈화해서 편하게 사용할 수 있을 것 같았다!
npm i node-sass
scripts
"sass": "node-sass -w -r --source-map true styles/main.scss ./style.css",
$ : 변수 선언시 유의사항 ? 숫자로 시작 X, 소문자를 할때에는 - 대문자 _
$hihi-1 : 1;
$HIHI_1 : 2;
보통 색상과 텍스트는 styles/constants/_colors.scss 혹은 _typography.scss 로 파일을 분리함!
디버그
@debug (($lg-unit + $gutter) * $lg-columns);
font smoothing
reset.css에 넣어주면 폰트가 렌더링될때 부드럽게 렌더링됨!
*{ -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.container .row .col
//.col-sm-1 .col-md-2
[class^="col-"] {
padding: 0 $gutter/2;
}
@for $i from 1 through $sm-columns {
.col-sm-#{$i} {
width: percentage($i/$sm-columns);
}
}
mixin
@mixin hello($color) {
color: $color;
}
p{
@include hello(blue);
}
function
@function _get-flex-value() {
@return 1;
}
@mixin flexbox($jc: center, $ai: center) {
display: flex;
justify-content: $jc;
align-items: $ai;
}
.list {
font-size: _get-flex-value();
}
.list{
@include flexbox
}
Sass Guidelines — Korean translation
참고해보기!
프로젝트에서 SCSS를 도입하던중, 해맸다.
공부를할때에는 react가 아닌 html css 파일로만 작업을 하다보니,
package.json 파일의 scripts 부분의 수정이 필요했다! 리액트에서도 당연히 아래와같은 작업을 해줘야 할것이라 생각했었다.
"scripts": {
"node-sass": "node-sass",
"sass": "node-sass -w -r styles/main.scss ./style.css",
"test": "echo \"Error: no test specified\" && exit 1"
},
하지만, 그냥 하면됐었다.....
npm i node-sass
Changed import in App.tsx
from import './App.css';
to import './App.scss';
이렇게 간단하게 끝나는 거였다……