MENOS - Nombres de variables

Descripción

Podemos definir las variables con un nombre de variable que consta de un valor.

Example

El siguiente ejemplo demuestra el uso de una variable que contiene otra variable en el archivo LESS:

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

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

Ahora cree el archivo style.less .

estilo sin

.myclass {
   @col: #ca428b;
   @color: "col";
   background-color: @@color;
}

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

myclass {
   background-color: #ca428b;
}

Output

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

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

↰ Previous page