МЕНЬШЕ - Mixin Guards

Описание

Если вы хотите сопоставить простые значения или количество аргументов в выражениях, вы можете использовать охранники. Он связан с объявлением миксина и включает условие, которое прикреплено к миксину. Каждый миксин будет иметь одну или несколько охранников, разделенных запятыми; охранник должен быть заключен в круглые скобки. LESS использует защищенные миксины вместоif/else операторы и выполняет вычисления для определения согласованной примеси.

В следующей таблице описаны различные типы защитных приспособлений для миксинов.

Sr. No.	Типы и описание
1	Операторы сравнения охранников Вы можете использовать оператор сравнения (=) для сравнения чисел, строк, идентификаторов и т. Д.
2	Логические операторы охраны Вы можете использовать и ключевое слово , чтобы работать вокруг логических операторов с охранниками.
3	Функции проверки типов Он содержит встроенные функции для определения типов значений для сопоставления миксинов.
4	Условные миксины LESS использует функцию по умолчанию для сопоставления миксина с другими совпадениями микширования.

пример

В следующем примере демонстрируется использование охранников миксинов в файле LESS -

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

   <body>
      <h2>Example of Mixin Guards</h2>
      <p class = "class1">Hello World...</p>
      <p class = "class2">Welcome to Tutorialspoint...</p>
   </body>
</html>

Теперь создайте файл style.less .

style.less

.mixin (@a) when (lightness(@a) >= 50%) {
   font-size: 14px;
}

.mixin (@a) when (lightness(@a) < 50%) {
   font-size: 16px;
}

.mixin (@a) {
   color: @a;
}

.class1 {
   .mixin(#FF0000)
}

.class2 {
   .mixin(#555)
}

Вы можете скомпилировать style.less в style.css , используя следующую команду -

lessc style.less style.css

Выполните указанную выше команду; он автоматически создаст файл style.css со следующим кодом -

style.css

.class1 {
   font-size: 14px;
   color: #FF0000;
}

.class2 {
   font-size: 16px;
   color: #555;
}

Вывод

Выполните следующие действия, чтобы увидеть, как работает приведенный выше код -

Сохраните приведенный выше html-код в mixin-guard.html файл.
Откройте этот HTML-файл в браузере, и вы увидите следующий результат.