LESS CSS에서 변수 선언 및 사용 예제은 어떻게 될까요? 아래에서 알아보고자 합니다.


# LESS에서 변수의 선언


먼저 LESS의 변수 선언 방법입니다. LESS에서 변수를 선언하려면 @기호를 사용하여 아래와 같이 선언할 수 있습니다.

@pad: 10px
@mar: 100px
;
@a-color: #ff6600;
위와같이 변수에 값을 설정해 두면 다음에 나오는 코드에서 언제나 간편하게 가능합니다. 그럼 아래에서 자세한 예제를 봐주세요.


# LESS 변수의 사용예제

LESS에 변수를 선언하여 사용하면 Compile 과정을 거쳐 저희가 원했는 css로 변환되는 과정을 거치고 이 변환된 코드가 css로 적용되게됩니다.
@pad: 100px;
@mar: 50px;

ul {
padding: @pad;
margin: @mar;
}

위 코드는 변환전의 LESS 코드입니다. 위 코드의 변환 후 코드는 아래와 같습니다.

ul {
padding: 100px;
margin: 50px;
}

이처럼 변수를 활용하면 자주 사용하는 값들을 미리 설정하여 사용할 수 있다는 매우 큰 장점이 있습니다.


# LESS 보간변수 사용방법(Variable Interpolation)

CSS의 값으로 사용하는 것 뿐만 아니라 선택자 이름, url 등에도 사용할 수 있는데 이를 보간변수라고 합니다. 이 때 {} 기호를 사용합니다.

@img: "/images/"

.bgImg
{
  background-image: url("@{img}/test.jpg");
}

이 경우 아래와 같이 컴파일되어 나타납니다.

.bgImg {
  background-image: url("@{img}/test.jpg");
}