Less.js @import Ат-правила

Опубликовано: 29 Декабря, 2022

Less.js @import At-Rules в основном используется для импорта файла, который находится в исходном коде. И мы можем разместить оператор @import в любом месте исходного кода. А @import At-Rules позволяют нам распределять меньше кода по разным файлам. Используя ключевое слово @import, мы можем легко отделить и поддерживать нашу структуру кода.

Все другие типы правил должны следовать после правил @import в стандартном CSS. Однако Less не беспокоит размещение объявлений @import.

Расширение файла:

// file_name.less is imported
@import "file_name";

// file_name.less is imported
@import "file_name.less";

// file_name.php imported as a Less file
@import "file_name.php";

// statement left in place, as-it-is
@import "file_name.css";

Синтаксис:

@import "filename";

// and also we can import
@import (keyword) "filename";

Перед использованием @import мы должны установить:

npm install import

Пример 1:

Шаг 1: Создайте рабочий каталог вместе с созданием подпапки с именем CSS, а затем создайте в нем файл с именем one.less.

Шаг 2: Добавьте следующий код во вновь созданный файл и сохраните его:

one.less

.dashed {
    border-style: dashed;
    outline: 20px solid green;
}

Шаг 3: Теперь внутри подпапки CSS создайте новый файл с именем two.less внутри two. less file записывает код для импорта файла.

Использование @import (несколько) позволяет импортировать несколько файлов. Здесь я использовал вариант @import (множественный). меньше» в два раза, так что это даст. пунктир {} два раза. Если я буду использовать @import (несколько)», один. меньше» один раз, тогда .dashed даст только один раз.

two.less

@import (multiple)"one.less";
@import (multiple)"one.less";

Для компиляции кода напишите следующее:

во-первых, мы должны перейти в подпапку CSS. Чтобы перейти в подпапку CSS, напишите следующую команду в терминале.

cd CSS

После подпапки CSS напишите следующую команду для компиляции кода.

lessc two.less

Вывод: вывод будет показан следующим образом.

.dashed {
  border-style: dashed;
  outline: 20px solid green;
}
.dashed {
  border-style: dashed;
  outline: 20px solid green;
}

Пример 2:

Шаг 1: Сначала создайте One. less, добавьте в него следующий код и сохраните его.

One.less

@primary-color: black;
@text-color: green;
@color: red;
@sonu: #483d8b;
body {
    background: @primary-color;
}
h1 {
    color: @text-color;
    text-align: center;
}
h2 {
    color: @color;
    text-align: center;
}
h3 {
    color: @sonu;
    text-align: center;
}

Шаг 2: Затем создайте еще один файл с именем Two.css, добавьте в него следующий код и сохраните его.

two.less

body {
  background: black;
}
h1 {
  color: green;
  text-align: center;
}
h2 {
  color: red;
  text-align: center;
}
h3 {
  color: #483d8b;
  text-align: center;
}

Шаг 3: После второго шага импортируйте файл One. less и Two.css и сохраните файл с именем variable.css.

Здесь используется @import «имя файла»:

variable.css

@import "One.less";
@import "Two.css";

Шаг 4: После импорта файла переменная .css связана с файлом HTML.

HTML

<!DOCTYPE html>
<html lang="en">
   
<head>
 <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" 
          content="IE=edge">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="variable.css" >
  
</head>
<title>GeeksforGeeks</title>
   
<body>
    <h1>
        GeeksforGeeks
    </h1>
   
    <h3>
        @import At-Rules
        Import styles from other style sheetsIn standard CSS, 
          @import at-rules must precede all other types of rules. 
    </h3>
     <h2>Computer Science</h2>
</body>
   
</html>

Выход:

Ссылка: https://lesscss.org/features/#import-atrules-feature

JavaScript Picked

Less.js @import Ат-правила

one.less

two.less

One.less

two.less

variable.css

HTML

РЕКОМЕНДУЕМЫЕ СТАТЬИ