Variáveis em LESS

A linguagem LESS permite o uso de variáveis. Variáveis representam um contêiner, no qual você pode armazenar alguns dados e usá-los nos lugares necessários do código.

Para criar uma variável, você precisa pensar em um seu nome e colocar o símbolo @ antes dele. Em seguida, após o nome da variável, colocamos dois pontos e especificamos o valor dessa variável. Vamos como exemplo, criar uma variável com o nome var:

styles.less@var: 20px;

Agora vamos usar essa variável como o valor de uma propriedade:

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

Como resultado, após a compilação para CSS, em vez de nossa variável, seu valor será substituído:

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

styles.less@color: #000;

p {
  color: @color;
}