1. Partial(파일분리, @import 사용하기)
소스에 반복되는 부분들을 분리, 분산시켜서 모듈화시키는 기능.
SCSS나 Sass를 사용하면, 프로젝트가 커질수록 유지보수와 수정이 어려운 CSS의 단점을 보완해 준다. SCSS/Sass 파일을 @import 해서 스타일 별로, 기능별로 파일을 분리하여 사용할 수도 있다. 이러면 코드를 관리하기도 편해진다.
(@import는 CSS에서도 자주 사용한다. 구글 웹폰트 같은 거 사용할 때 자주 씀)
** @import하는 파일명 앞에는 _(언더바)를 붙여야 한다. 언더바를 붙이지 않는다면 분할 된 파일들 모두가 컴파일 되기 때문에 여러개의 .css 파일이 나눠서 저장된다. 그러나 SCSS/Sass 파일 이름 앞에 언더바를 붙여서 파일명을 저장하면, SCSS/Sass에게 이 파일이 main 파일의 일부분임을 알려줘서 해당파일은 css 파일로 컴파일 하지 않고 내부에서 @import 형태로 작동한다.
** CSS는 import할 때 파일 url을 적어줘야 하지만, Sass/SCSS에서 import 할 때는 확장명을 제외하고 파일명만을 사용할 수 있다.
<body>
<h1>Sass - Partials</h1>
</body>//SCSS
//파일명: _var.scss
$color-primary: blue;
//style.scss
@import './partial/var';
h1{
color: $color-primary;
}
//style.css
h1 {
color: blue;
}/*# sourceMappingURL=style.css.map */
_var.scss 파일에 $color-primary 변수를 지정하고 style.scss 파일에서 _var.scss 파일을 임포트하여 변수에 값을 대입시켰다. 변수별, 레이아웃별, 폰트별로 scss 파일을 분류해두고 사용하면 큰 프로젝트에서 코드를 재사용하기 편하고 관리도 용이하다.
참고
https://millie.page.link/fJ1WA
40 minutes Basic Sass
Front-End의 CSS를 하다 보면 어렴풋이 들려오는 Sass.Sass가 효율적인 스타일 적용에 도움이 된다 하지만, 막상 Sass를 공부하려니 주저하셨나요? S..
www.millie.co.kr
https://www.youtube.com/watch?v=zmQ47GJlda8
'HTML & CSS > SASS(SCSS)' 카테고리의 다른 글
| Sass/SCSS 7. @extend (0) | 2023.03.07 |
|---|---|
| Sass/SCSS 6-2. Partials @use, @forward는 언제 쓰는 걸까? (0) | 2023.01.28 |
| Sass/SCSS 문법 5. 믹스인(Mixins) (0) | 2023.01.26 |
| Sass/SCSS 문법 4. Maps와 @each문 사용하기 (0) | 2023.01.26 |
| Sass/SCSS 문법 3. Lists (0) | 2023.01.26 |