Import Directives & Options

@import 지시자 및 옵션

이 글에서는 @import 지시자 그리고 옵션에 대해 알아봅니다.

LESS import 원문보기

Import Directives

@import 지시자는 다른 스타일시트에서 스타일을 불러옵니다.

그리고 표준 CSS @import 구문 규칙은 다른 모든 타입보다 먼저 작성되어야 합니다. 즉, 최상단에 위치해야 됩니다.

하지만 LESS 에서는 @import 문을 두는 곳에 어디든 상관없습니다. 다음과 같이 :

less

.foo {
	background: #900;
}
.bar {
	text-align: center;
}
@import "this-is-valid.less";

File Extensions(파일 확장자)

@import 문은 파일의 확장자에 따라서 다른 방법으로 처리 할 수​​ 있습니다

• 파일이 .CSS 확장자의 경우는 CSS 로 처리될 것입니다.
• 파일이 다른 확장자를 가지는 경우, 그것은 less로 처리되어 불러올 것입니다.
• 확장자가 없는 경우는 .less가 추가되어 less 파일로 처리되어 임포트됩니다.

less

@import "foo";      // 확장자가 없는 경우 less로 인식
@import "foo.less"; // less 로 임포트
@import "foo.php";  // 다른 확장자일 경우 less로 인식
@import "foo.css";  // .css 확장자는 그대로 css를 임포트

Import Options

다음의 옵션들은 동작을 재정의하는데 사용할 수 있습니다.

LESS는 외부파일에서 할 수 있는 것들을 좀더 유연성을 제공하기 위해 CSS의 @import CSS 에서 몆 가지 옵션을 제공하고 있습니다.

@import (keyword) "filename";

import 지시자는 다음과 같이 구현되어 있습니다.

• reference : less를 사용하지만 css로 출력하지 않도록 한다.
• inline : 출력 파일에 소스파일을 포함하지만 그것을 처리하지 않는다.
• less : 어떤 파일의 확장자라도 less 파일로 처리한다.
• css : 어떤 파일의 확장자라도 css 파일로 처리한다.
• once : 파일을 한번만 포함한다(기본 값)
• multiple : 파일을 여러번 포함한다.
• optional : 파일을 찾을 수 없는 경우 컴파일을 계속하도록 한다.

@import 문에서 여러 키워드가 허용되고 사용자는 콤마(,)를 사용하여 키워드를 구분해야 합니다.

less

@import (optional, reference) "foo.less";

reference 키워드

@import (reference) 는 외부파일을 불러오지만 참조되지 않는한 컴파일하여 스타일을 추가하지 않습니다.

@import (reference) "foo.less";

예를 들어 위와 같이 foo.less 파일이 있다고 해봅니다. 그리고 style.less 파일에서 foo파일을 @import (reference) "foo.less"; 한다고 했을 때 style.less에서 foo.less 있는 참조 선택자를 사용하지 않는한 임포트한 foo의 스타일은 CSS로 컴파일되지 않을 것입니다.

이는 다른 라이브러리를 사용할 때 매우 유용할 수 있습니다.

만약 부트스트랩 라이브러리를 임포트하고 있다면 이를 사용하기 위해 믹스인과 extend를 이용하여 참조할 수 있을 것입니다.

예를 들어 부트스트랩 등의 라이브러리에서 특정 테마와 스타일을 아래와 같이 수행할 수 있습니다.

less

.navbar:extend(.navbar all) {}

위와 같이 하면 부트스트랩에서 .navbar 관련 스타일만 불러오게 될 것입니다.

inline 키워드

css 파일이 less 파일과 호환되지 않을 경우 @import (inline) 를 사용하여 외부 파일을 포함하여 사용할 수 있습니다.

LESS가 표준 CSS를 잘 지원하지만 CSS 핵, 어떤 곳에서의 주석등을 지원하지 않을 지도 모르기 때문에 이럴 경우에 CSS 파일을 inline 키워드로 임포트하여 사용하면 CSS를 하나의 파일에 잘 보이도록 출력할 수 있습니다.

@import (inline) "not-less-compatible.css";

less 키워드

@import (less)를 사용하면 파일 확장자와 상관없이 .less 파일처럼 처리하도록 사용할 수 있습니다.

@import (less) "foo.css";

.css 확장자이지만 이 파일을 .less 파일처럼 처리합니다.

css 키워드

@import (css)를 사용하면 파일 확장자를 상관하지 않고 .css 처럼 다루도록 사용할 수 있습니다.

그리고 임포트 구문은 CSS 출력파일에 그대로 남아있게 됩니다. 다음과 같이 :

less

@import (css) "style.less";

컴파일된 css

@import (css) "style.less";

once 키워드

@import 문의 기본동작으로 이것을 파일을 한 번만 불러오도록 합니다. 

불러온 파일을 다시 임포트한다면 그 임포트 구문은 무시됨을 의미합니다.

less

@import (once) "foo.less";
@import (once) "foo.less"; // 이 구문은 무시된다

multiple 키워드

@import (multiple)를 사용하면 같은 이름으로 여러 파일을 불러올 수 있도록 할 수 있습니다.

이것은 once 키워드와 반대되는 동작을 합니다.

less

//  foo.less 파일에 아래와 같이 작성되어 있다고 가정
.a {
  color: green;
}
//  main.less 파일에서 아래와 같이 같은 이름 파일을 임포트한다
@import (multiple) "foo.less";
@import (multiple) "foo.less";

컴파일된 css

.a {
  color: green;
}
.a {
  color: green;
}

optional

@import (optional)를 사용하면 불러오려는 파일이 존재하는 경우에만 임포트 구문이 실행될 것입니다.

optional 키워드 없이 존재하지 않는 파일을 밈포트한다면 파일을 찾을 수 없어서 파일 에러를 발생할 것입니다.

불러오려는 파일 유무와 상관없이 컴파일 에러를 방지할 수 있습니다.

Jaehee's WebClub