Zmienne w LESS

Język LESS pozwala na używanie zmiennych. Zmienna reprezentuje kontener, w którym można przechowywać jakieś dane i używać ich w potrzebnych miejscach kodu.

Aby utworzyć zmienną, trzeba wymyślić jej nazwę i przed nią postawić znak @. Następnie po nazwie zmiennej stawiamy dwukropek i podajemy wartość tej zmiennej. Dla przykładu zróbmy zmienną o nazwie var:

styles.less@var: 20px;

Teraz użyjmy tej zmiennej jako wartości właściwości:

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

W wyniku po kompilacji do CSS zamiast naszej zmiennej zostanie podstawiona jej wartość:

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

styles.less@color: #000;

p {
  color: @color;
}