MENOS - Correspondência de padrões

Descrição

Você pode mudar o comportamento do mixin passando parâmetros para ele.

Considere um trecho de código LESS simples -

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

.line {
   .mixin(@color-new; #888);
}

Você pode usar valores diferentes para @ color-new para criar comportamentos de mixin diferentes, conforme mostrado no código fornecido a seguir.

.mixin(dark; @color) {
   color: darken(@color, 15%);
}

.mixin(light; @color) {
   color: lighten(@color, 15%);
}

@color-new: dark;

.line {
   .mixin(@color-new; #FF0000);
}

Se você definir o valor de @ color-new para dark, o resultado será exibido em uma cor mais escura, pois a definição do mixin corresponde ao escuro como primeiro argumento.

Exemplo

O exemplo a seguir demonstra o uso de correspondência de padrões no arquivo LESS -

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

   <body>
      <h2>Example of Pattern Matching</h2>
      <p class = "myclass">Welcome to Tutorialspoint...</p>
   </body>
</html>

Em seguida, crie o arquivo style.less .

style.less

.mixin(dark; @color) {
   color: darken(@color, 15%);
}

.mixin(light; @color) {
   color: lighten(@color, 15%);
}

@color-new: dark;

.myclass {
   .mixin(@color-new; #FF0000);
}

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

.myclass {
   color: #b30000;
}

Resultado

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

Salve o código html acima no pattern-matching.html Arquivo.
Abra este arquivo HTML em um navegador, a seguinte saída será exibida.

↰ Previous page