LESS에서 변수

LESS 언어는 변수 사용을 허용합니다. 변수는 어떤 데이터를 저장하고 코드의 필요한 곳에서 사용할 수 있는 컨테이너를 나타냅니다.

변수를 생성하려면, 그 이름을 생각해 내고 그 앞에 @ 기호를 붙입니다. 그런 다음 변수 이름 뒤에 콜론을 넣고 변수의 값을 지정합니다. 예를 들어 var라는 이름의 변수를 만들어 봅시다:

styles.less@var: 20px;

이제 이 변수를 속성 값으로 사용해 봅시다:

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

결과적으로 컴파일 후 CSS에는 우리 변수 대신 그 값이 대입될 것입니다:

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

styles.less@color: #000;

p {
  color: @color;
}