[SCSS] 불러오기 (@import)

불러오기 (@import)

scss에서의 import는 css의 @import규칙을 확장하여 mixin, functions 및 변수에 대한 액세스를 제공하고 여러 스타일시트의 css를 함께 결합한다.

 

사용방법은 다음과 같이 @import를 사용하여 특정.scss 파일을 불러와 사용할 수 있다.

/* @import "layout.scss" */
@import "layout";

확장자를 붙이지 않아도 상관 없기 때문에 보통 생략해서 사용한다.

 

scss에서 @import는 기본적으로 scss 파일을 가져오는데, css @import 규칙으로 컴파일되는 몇 가지 상황이 있다.

• 파일 확장자가 .css일 때
• 파일 이름이 http:// 또는 https://로 시작하는 경우
• url()이 붙어있는 경우
• 미디어쿼리가 있는경우

@import "theme.css";
@import "http://fonts.googleapis.com/css?family=Droid+Sans";
@import url(theme);
@import "landscape" screen and (orientation: landscape);

 

중첩 (Nesting)

@import는 일반적으로 스타일시트의 최상위에서 작성되지만 반드시 그럴 필요는 없다.

/* _theme.scss */
pre, code {
  font-family: 'Source Code Pro', Helvetica, Arial;
  border-radius: 4px;
}

/* style.scss */
.theme-sample {
  @import "theme";
}

to css

.theme-sample pre, .theme-sample code {
  font-family: 'Source Code Pro', Helvetica, Arial;
  border-radius: 4px;
}

이런식으로 사용하게 되면 범위를 지정하는데 유용하지만, 중첩으로 사용된 파일의 최상위 믹스인, 함수 및 변수는 여전히 전역으로 정의된다는 점을 주의해야한다.

 

파일 분할 (Partials)

Sass(SCSS)에서는 Partials 기능을 지원하는데,

이는 파일 이름 앞에 _를 붙여 @import로 가져오면 컴파일 시 ~.css 파일로 컴파일하지 않는다.

 

일종의 규칙으로 파일명 앞에 언더바가 있는 경우 이 파일은 import에 사용되었다 라는 의미를 가진다.

 

그래서 좀 더 파일을 관리하기 쉽게 하나의 패턴이 존재하는데,

바로 7-1 Architecture다.

 

[SCSS] 7-1 Architecture (7-1 패턴 / 폴더 구조)

 

개인이 속한 프로젝트에 따라 다른 규칙을 적용했을 수도 있는데, 되도록 _를 사용할 것을 권장한다.

---

참고: https://sass-lang.com/documentation/at-rules/import

Sass: @import