LESS - Funções

Descrição

LESS mapeia código JavaScript com manipulação de valores e usa funções predefinidas para manipular aspectos de elementos HTML na folha de estilo. Ele fornece várias funções para manipular cores, como função redonda, função do piso, função do teto, função de porcentagem, etc.

Exemplo

O exemplo a seguir demonstra o uso de funções no arquivo LESS -

<html>
   <head>
      <title>Less Functions</title>
      <link rel = "stylesheet" type = "text/css" href = "style.css" />
   </head>
   
   <body>
      <h1>Example using Functions</h1>
      <p class = "mycolor">LESS enables customizable, 
      manageable and reusable style sheet for web site.</p>
   </body>
</html>

Agora crie o arquivo style.less .

style.less

@color: #FF8000;
@width:1.0;
.mycolor {
   color: @color;
   width: percentage(@width);
}

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

lessc style.less style.css

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

style.css

.mycolor {
   color: #FF8000;
   width: 100%;
}

Resultado

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

  • Salve o código html acima no functions.html Arquivo.

  • Abra este arquivo HTML em um navegador, exibido, você receberá a seguinte saída.