LESS - Mixin Guards

Descrição

Se você deseja combinar valores simples ou número de argumentos em expressões, então você pode fazer uso de protetores. Está associado à declaração do mixin e inclui a condição anexada a um mixin. Cada mixin terá um ou mais guardas separados por vírgula; um guarda deve ser colocado entre parênteses. LESS usa mixins protegidos em vez deif/else declarações e realiza cálculos para especificar o mixin correspondente.

A tabela a seguir descreve os diferentes tipos de protetores de mixins junto com a descrição.

Sr. Não. Tipos e descrição
1 Operadores de comparação de guarda

Você pode usar o operador de comparação (=) para comparar números, strings, identificadores, etc.
2 Operadores lógicos de guarda

Você pode usar a palavra-chave e para contornar os operadores lógicos com protetores.
3 Funções de verificação de tipo

Ele contém as funções integradas para determinar os tipos de valor para os mixins correspondentes.
4 Mixins condicionais

LESS usa a função padrão para combinar o mixin com outras combinações de mixagem.

Exemplo

O exemplo a seguir demonstra o uso de guardas de mixin no arquivo 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>

Agora, crie o arquivo 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)
}

Você pode compilar o style.less para style.css usando o seguinte comando -

lessc style.less style.css

Execute o comando acima; ele criará o arquivo style.css automaticamente com o seguinte código -

style.css

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

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

Resultado

Siga estas etapas para ver como o código acima funciona -

  • Salve o código html acima no mixin-guard.html Arquivo.

  • Abra este arquivo HTML em um navegador, a seguinte saída será exibida.