SCSS

• SCSS는 CSS의 단점을 보완하기 위한 CSS 확장 언어

@mixin

• 함수와 비슷한 동작
• 재사용할 CSS 스타일 그룹 선언을 정의

@mixin flexbox {
	display: flex;
    justify-content: center;
    align-items: center;
}

body {
	@include flexbox;
}

• @mixin으로 스타일을 정의하고 @include로 적용

@mixin flexbox($width, $height) {
	display: flex;
    justify-content: center;
    align-items: center;
    
    width: $width;
    height: $height;
}

body {
	@include flexbox(100vw, 100vh);
}

@import

• 모듈화로 분리해놓은 SCSS 파일을 불러와 컴파일할 수 있다
• CSS의 @import는 사용할 때마다 http 호출을 해서 속도 저하가 발생하지만 SCSS의 @import는 CSS로 컴파일하면서 바로 처리하기 때문에 속도 저하가 없다

@import 'post.scss';
@import 'post'; // 확장자 생략 가능

• 파일명 앞에 _를 붙여주면 CSS로 컴파일될 때 해당 파일은 컴파일되지 않는다
  -> _파일의 내용은 적용되지만 CSS로 컴파일되지 않아 관리하기 편리하다

@use

• @import와 비슷하다
• 다른 SCSS파일의 mixin, 변수 등을 가져올 수 있다
• @use로 가져온 스타일은 여러번 로드되더라도 컴파일된 CSS 파일에는 한 번만 표시

@use 'global';

body {
	@include global.flexbox(100vw, 100vh);
}

• 어떤 파일에서 가져왔는지 명시할 수 있다

@forward

• @use와 비슷하다
• @use와 다르게 @forward를 사용하면 페이지 내에서 @forward한 모듈의 mixin, 변수 등을 사용할 수 없다
  -> @forward로 모듈을 가져온 파일을 @use를 사용해 import하면 된다
• @use한 파일에서 @use한 파일 안에 있는 콘텐츠를 사용하고 싶을때 @forward

// main.scss
@use 'global';
@forward 'global';

main {
	@include global.flexbox(100px, 100px);
}

// index.scss
@use 'main';

body {
	@include main.flexbox(100vw, 100vh);
}

참고자료
https://www.biew.co.kr/entry/SassㆍSCSS-SASS-문법-5편-mixin-extend-import
https://www.liquidlight.co.uk/blog/use-and-import-rules-in-scss/