MENOS - Variables predeterminadas

Descripción

La variable predeterminada tiene la capacidad de establecer una variable solo cuando aún no está establecida. Esta función no es necesaria porque las variables se pueden anular fácilmente definiéndolas posteriormente.

Ejemplo

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

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

   <body>
      <h1>Welcome to Tutorialspoint</h1>
      <p>LESS is a CSS pre-processor that enables customizable, 
      manageable and reusable style sheet for web site.</p>
   </body>
</html>

Ahora cree el archivo style.less .

estilo sin

@import "http://www.tutorialspoint.com/less/lib.less"; // first declaration of @color
@color: green; // this will override @color defined previously
p {
   color : @color;
}

El siguiente código importar el lib.less archivo en style.less de la camino -

lib.less

@color: blue;

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

p {
   color: green;
}

Salida

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

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

↰ Previous page