Учебники

LESS — импортные директивы

Сентябрь 5, 2018

Директива @import используется для импорта файлов в коде. Он распространяет код LESS по разным файлам и позволяет легко поддерживать структуру кода. Вы можете поместить операторы @import в любом месте кода.

Например, вы можете импортировать файл, используя ключевое слово @import как @import «file_name.less» .

Расширения файлов

Вы можете использовать операторы @import в зависимости от различных расширений файлов, таких как —

  • Если вы используете расширение .css , то оно будет рассматриваться как CSS, а оператор @import останется без изменений.

  • Если оно содержит какое-либо другое расширение, оно будет считаться МЕНЬШИМ и будет импортировано.

  • Если расширение LESS отсутствует, оно будет добавлено и включено как импортированный файл LESS.

Если вы используете расширение .css , то оно будет рассматриваться как CSS, а оператор @import останется без изменений.

Если оно содержит какое-либо другое расширение, оно будет считаться МЕНЬШИМ и будет импортировано.

Если расширение 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-файл в браузере, отобразится следующий вывод.

48
Share: