МЕНЬШЕ - Директивы по импорту

Описание

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

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

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

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

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