css 전처리 도구
_mixin.scss
@mixin positionCenter {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
_header.scss
.logo {
@include positionCenter;
}
_variable.scss
$font-en: 'Montserrat', 'Noto Sans KR', sans-serif;
_reset.scss
body {
font-family: $font-kr;
}
mixin.scss이나 variable.scss에 담아놓은 것을 원하는 곳에 불러서 쓸 수 있다
.header {
.group-flex {}
.logo {}
}
중첩 기능을 이용하여 중복적인 코드를 줄일 수 있다
태그의 점수
중첩을 이용하여 계속 점수를 높이지 말고 필요한 선에서만 이어나갈 것!
style.scss에 작성
@import './abstracts/variable';
@import './abstracts/mixin';
@import './base/typo';
@import './base/reset';
@import './base/preset';
@import './layout/header';
@import './layout/footer';
@import './component/button';
@import './page/main';
결국은 scss에서 작업한게 css로 가서 통합이 된다. scss 전처리도구가 컴파일이 되면 css로 바뀌는 것!
어떻게 컴파일을 할 것인가??
vscode에서 제공하는 확장도구 live sass compiler 설치 후 확장 설정에 들어가서 셋팅편집을 한다