MENO - Nomi variabili

Descrizione

Possiamo definire le variabili con un nome di variabile costituito da un valore.

Example

Il seguente esempio dimostra l'uso di una variabile che contiene un'altra variabile nel file 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>

Ora crea il file style.less .

style.less

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

Puoi compilare style.less in style.css usando il seguente comando:

lessc style.less style.css

Esegui il comando precedente; creerà automaticamente il file style.css con il seguente codice:

style.css

myclass {
   background-color: #ca428b;
}

Output

Segui questi passaggi per vedere come funziona il codice sopra:

  • Salva il codice html sopra nel file less_variables_names.html file.

  • Apri questo file HTML in un browser, verrà visualizzato il seguente output.