사용 방법

CSS의 @import는 다음과 같이 사용됩니다.

@import url("style.css");
@import "style.css";

SCSS의 @import는 다음과 같이 사용됩니다.

@import "style.css";

SCSS의 @import는 단순히 파일 경로를 지정할 수 있으며, SCSS 파일을 다른 SCSS 파일에 가져올 수 있습니다. 반면 CSS의 @import는 외부 CSS 파일을 가져올 때 사용됩니다.

처리 시점

CSS의 @import는 런타임에 동적으로 처리되며, 가져온 스타일시트를 요청할 때마다 추가적인 네트워크 요청을 발생시킵니다. 따라서 페이지 로딩 속도가 저하될 수 있습니다.

SCSS의 @import는 전처리 단계에서 처리되며, 컴파일러에 의해 모든 SCSS 파일이 단일 CSS 파일로 결합될 때 처리됩니다. 따라서 최종 생성된 CSS 파일에는 @import문이 포함되지 않으며, 하나의 CSS 파일로 최적화된 결과를 제공합니다.

성능 차이