MENOS - Funciones

Descripción

LESS asigna código JavaScript con manipulación de valores y utiliza funciones predefinidas para manipular aspectos de elementos HTML en la hoja de estilo. Proporciona varias funciones para manipular colores, como función redonda, función de suelo, función de techo, función de porcentaje, etc.

Ejemplo

El siguiente ejemplo demuestra el uso de funciones en el archivo 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>

Ahora cree el archivo style.less .

estilo sin

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

Puede compilar el archivo style.less en style.css usando el siguiente comando:

lessc style.less style.css

Ahora ejecute el comando anterior; creará el archivo style.css automáticamente con el siguiente código:

style.css

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

Salida

Siga estos pasos para ver cómo funciona el código anterior:

  • Guarde el código html anterior en el functions.html archivo.

  • Abra este archivo HTML en un navegador, aparecerá el siguiente resultado.