MENOS - Operaciones

Descripción

LESS proporciona soporte para algunas operaciones aritméticas como más (+), menos (-), multiplicación (*) y división (/) y pueden operar con cualquier número, color o variable. Las operaciones ahorran mucho tiempo cuando utiliza variables y le apetece trabajar en matemáticas simples.

Ejemplo

El siguiente ejemplo demuestra el uso de operaciones en el archivo LESS:

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

A continuación, cree el archivo style.less .

estilo sin

@fontSize: 10px;
.myclass {
   font-size: @fontSize * 2;
   color:green;
}

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

lessc style.less style.css

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

style.css

.myclass {
   font-size: 20px;
   color: green;
}

Salida

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

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

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