Variabile în LESS

Limbajul LESS permite utilizarea variabilelor. Variabila reprezintă un container, în care se pot stoca date și care pot fi utilizate în locurile necesare din cod.

Pentru a crea o variabilă, trebuie să găsești un nume pentru ea și în fața lui să pui semnul @. Apoi după numele variabilei punem două puncte și indicăm valoarea acestei variabile. Să creăm de exemplu o variabilă cu numele var:

styles.less@var: 20px;

Să utilizăm acum această variabilă ca valoare a unei proprietăți:

styles.lessp {
  font-size: @var;
}

Ca rezultat, după compilare în CSS, în locul variabilei noastre va fi înlocuită valoarea ei:

styles.cssp {
  font-size: 20px;
}

styles.less@color: #000;

p {
  color: @color;
}