본문 바로가기
Style Sheets/Sass(SCSS)

[SCSS] 불러오기 (@import)

by 썸머워즈 2022. 6. 23.
반응형

불러오기 (@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 패턴 / 폴더 구조)

sass 프로젝트를 구성하는 인기가 많고 효과적인 모듈식 방법 중 하나가 7-1 패턴이다. 실제로 sass 가이드라인에서도 이 7-1 패턴을 다루고 있다. 7-1이 의미하는 게 뭐냐면 7개의 폴더와 하나의 파

mine-it-record.tistory.com

 

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


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

 

Sass: @import

Sass extends CSS's @import rule with the ability to import Sass and CSS stylesheets, providing access to mixins, functions, and variables and combining multiple stylesheets' CSS together. Unlike plain CSS imports, which require the browser to make multiple

sass-lang.com

반응형


댓글

TOP