MENOS - Resumen de variables

Descripción

La repetición del mismo valor muchas veces se suele ver en la hoja de estilo. En lugar de usar el mismo valor varias veces, se pueden usar variables . Facilita el mantenimiento del código y esos valores se pueden controlar desde una única ubicación.

Ejemplo

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

<html>
   <head>
     <link rel = "stylesheet" href = "style.css" type = "text/css" />
     <title>LESS variables overview</title>
   </head>

   <body>
      <h1>Welcome to Tutorialspoint</h1>
      <div class = "div1">
         <p>LESS is a CSS pre-processor that enables customizable, 
            manageable and reusable style sheet for web site.</p>
      </div>
         
      <div class = "div2">
         <p>LESS is a dynamic style sheet language that extends the capability of CSS. 
            LESS is also cross browser friendly.</p>
      </div>
   </body>
</html>

Ahora cree el archivo style.less .

estilo sin

@color1: #ca428b;
.div1 {
   background-color : @color1;
}

.div2 {
   background-color : @color1;
}

Puede compilar 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

h1 {
   color: #D0DC11;
}

.div1 {
   background-color: #ca428b;
   color: #D0DC11;
}

.div2 {
   background-color: #ca428b;
   color: #D0DC11;
}

Salida

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

Guarde el código html anterior en el less_variables_overview.html archivo.
Abra este archivo HTML en un navegador, se mostrará el siguiente resultado.

↰ Previous page