@import, use, forward 차이점 (Sass)

@import 를 사용한것을 Partial(파샬)이라고 한다

소스에서 반복되는 부분을 분리/ 분산시켜서 모듈화 시키는 것이다 

@import 사용을 권장하지 않는다?

---backgroundColor.scss---
$color: red;

---fontColor.scss---
$color: blue;

---wrapper.scss---
@import "backgroundColor";
@import "fontColor"

body{
  font-color: $color
}

위와 같은 사태가 생길 수 있다

1. @import는 모든 변수에 대해 글로벌하게 접근 가능하다 

2. 코드가 복잡해지고 길어질 수록 변수명이 중복될 수 있으며

3. 이로 인해 $color 로 접근하는 경우 마지막에 import된 곳의 변수 값을 따라가서 의도와 다른 css 결과가 나올 수 있다 

@use사용시 import의 단점을 보완할 수 있다

---backgroundColor.scss---
$color: red;

---fontColor.scss---
$color: blue;

---wrapper.scss---
@import "backgroundColor";
@import "fontColor"

body{
  font-color: fontColor.$color
}

변수를 사용하더라도 앞에 파일 이름을(fontColor) 붙여서 변수의 위치를 '특정'할 수 있게 된다. 

import보다 코드 수정에 용이하다 

 

@forward 

@use 해야할 파일이 많은 경우. 전부 @forward 를 사용해 1개의 파일에 모을 수 있다 

하지만 import와 같이 중복되는 변수를 사용하는 경우 문제를 찾기 어렵다는 단점이 있다