import

main.scss에서는 import를 사용해야 한다.

@use

• 목적: @use 규칙은 다른 Sass 파일(모듈)을 사용하기 위한 것입니다. @use를 통해 가져온 모듈은 해당 파일에서만 사용됩니다.

• 기능:

  • 가져온 모듈의 변수, 믹스인, 함수 등을 현재 파일에서 직접 사용할 수 있습니다.
  • 가져온 모듈의 모든 내용을 로컬 스코프(현재 파일)에 포함시킵니다.
  • 모듈은 한 번만 로드되며, 동일한 모듈을 여러 번 @use해도 중복해서 적용되지 않습니다.
  • 네임스페이스를 지정할 수 있어 이름 충돌을 방지할 수 있습니다.

• 예시:

  @use 'path/to/module';
  
  .selector {
      color: module.$variable; // 'module'에서 정의된 변수 사용
  }
  

@forward

• 목적: @forward 규칙은 한 Sass 파일에서 다른 파일로 스타일, 변수, 믹스인, 함수 등을 전달(재전송)하는 데 사용됩니다. 이는 Sass 라이브러리를 만들 때 특히 유용합니다.

• 기능:

  • 파일 A에서 @forward 'B'를 사용하면, B의 모든 내용이 A를 통해 외부에 노출됩니다.
  • 라이브러리의 일부를 공개적으로 사용할 수 있게 하거나, 공개 범위를 제한할 수 있습니다.
  • 파일 간 의존성을 효과적으로 관리할 수 있습니다.

• 예시:

  // _index.scss 파일
  @forward 'buttons';
  @forward 'typography';
  

주요 차이점

• @use는 모듈의 내용을 현재 파일에서 사용하고자 할 때 사용합니다. 이는 모듈을 직접적으로 적용하고, 필요한 경우 네임스페이스를 통해 접근합니다.

• @forward는 모듈의 내용을 다른 Sass 파일로 전달하고자 할 때 사용합니다. 이는 주로 라이브러리나 패키지 내에서 내부 모듈을 외부로 노출시키는 데 쓰입니다.

@use와 @forward는 모듈 시스템을 활용하여 Sass 프로젝트의 구조를 개선하고, 코드의 재사용성과 유지보수성을 높이는 데 도움을 줍니다.

DANGER

@forward는 아직 실험적인 기능입니다. 사용 시 주의해주세요.
아직은 사용하지 않는 것을 권장합니다.