Учебники

LESS — Mixin Guards

Сентябрь 5, 2018

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

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

Sr.No. Типы и описание
1 Операторы сравнения охранников

Вы можете использовать оператор сравнения (=) для сравнения чисел, строк, идентификаторов и т. Д.

2 Логические операторы Guard

Вы можете использовать ключевое слово and для обхода логических операторов со средствами защиты.

3 Функции проверки типа

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

4 Условные миксины

LESS использует функцию по умолчанию для сопоставления mixin с другими совпадениями микширования.

Вы можете использовать оператор сравнения (=) для сравнения чисел, строк, идентификаторов и т. Д.

Вы можете использовать ключевое слово and для обхода логических операторов со средствами защиты.

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

LESS использует функцию по умолчанию для сопоставления mixin с другими совпадениями микширования.

пример

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

46
Share: