LESS-가져 오기 지시문

기술

그만큼 @import지시문은 코드에서 파일을 가져 오는 데 사용됩니다. LESS 코드를 여러 파일에 분산시켜 코드 구조를 쉽게 유지할 수 있습니다. 코드의 아무 곳에 나 @import 문을 넣을 수 있습니다 .

예를 들어 다음을 사용하여 파일을 가져올 수 있습니다. @import키워드는 @import "file_name.less" 입니다.

파일 확장자

다음 과 같은 다른 파일 확장자에 따라 @import 문을 사용할 수 있습니다.

.css 확장자를 사용하는 경우 CSS로 간주되고 @import 문은 그대로 유지됩니다.
다른 확장자가 포함 된 경우 LESS로 간주되어 가져옵니다.
LESS 확장자가 없으면 가져온 LESS 파일로 추가 및 포함됩니다.

@import "style";      // imports the style.less
@import "style.less"; // imports the style.less
@import "style.php";  // imports the style.php as a less file
@import "style.css";  // it will kept the statement as it is

예

다음 예제는 SCSS 파일에서 변수의 사용을 보여줍니다-

<!doctype html>
   <head>
      <title>Import Directives</title>
      <link rel = "stylesheet" href = "style.css" type = "text/css" />
   </head>

   <body>
      <h2>Example of Import Directives</h2>
      <p class = "myline">Welcome to Tutorialspoint...</p>
   </body>
</html>

다음으로 import_dir.less 파일을 만듭니다 .

import_dir.less

.myline {
   font-size: 20px;
}

이제 style.less 파일을 작성 하십시오.

style.less

@import "http://www.tutorialspoint.com/less/import_dir.less";
.myline {
   color:#FF0000;
}

import_dir.less의 파일로 가져 얻을 것이다 style.less 경로에서 파일https://www.tutorialspoint.com/less/import_dir.less.

다음 명령을 사용하여 style.less 를 style.css 로 컴파일 할 수 있습니다.

lessc style.less style.css

위의 명령을 실행하십시오. 다음 코드 를 사용하여 style.css 파일을 자동으로 생성합니다.

style.css

.myline {
   font-size: 20px;
}

.myline {
   color: #FF0000;
}

산출

위의 코드가 어떻게 작동하는지 보려면 다음 단계를 따르십시오.

위의 HTML 코드를 import_directives.html 파일.
브라우저에서이 HTML 파일을 열면 다음 출력이 표시됩니다.