반응형
불러오기 (@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다.
개인이 속한 프로젝트에 따라 다른 규칙을 적용했을 수도 있는데, 되도록 _를 사용할 것을 권장한다.
반응형
댓글