@import 2

Sass/SCSS 6-2. Partials @use, @forward는 언제 쓰는 걸까?

지난 포스팅은 @import를 사용해서 .scss(.sass) 파일을 분리하는 것을 공부해보았다. 그런데 최신버전에서는 @import를 쓰는 대신 @use와 @forward를 쓰라고 한다. @use와 @import는 어떻게 다를까? 그리고 왜 @import 대신 @use, @forward를 쓰는 것이 나을까? 1. @import를 쓰면 생기는 문제 지난 포스팅에서 이야기했듯이 규모가 큰 프로젝트일수록 .scss 파일을 따로 분리해서 사용한다. 예를 들어 배경색은 _bg.scss 파일로, 변수들은 _var.scss 이런식으로 따로 정리해서 모아둔다. 그러다보면 변수명도 겹칠 때가 있을지모른다. 배경색의 메인컬러를 지정하고 싶어서 $main-color라고 변수를 만들어 놨는데 폰트 색을 지정할 때도 $mai..

Sass/SCSS 6. Partials (@import)

1. Partial(파일분리, @import 사용하기) 소스에 반복되는 부분들을 분리, 분산시켜서 모듈화시키는 기능. SCSS나 Sass를 사용하면, 프로젝트가 커질수록 유지보수와 수정이 어려운 CSS의 단점을 보완해 준다. SCSS/Sass 파일을 @import 해서 스타일 별로, 기능별로 파일을 분리하여 사용할 수도 있다. 이러면 코드를 관리하기도 편해진다. (@import는 CSS에서도 자주 사용한다. 구글 웹폰트 같은 거 사용할 때 자주 씀) ** @import하는 파일명 앞에는 _(언더바)를 붙여야 한다. 언더바를 붙이지 않는다면 분할 된 파일들 모두가 컴파일 되기 때문에 여러개의 .css 파일이 나눠서 저장된다. 그러나 SCSS/Sass 파일 이름 앞에 언더바를 붙여서 파일명을 저장하면, SC..