LESS 변수

LESS에서 변수 사용하기

이 글에서는 LESS 변수 사용 방법에 대해 알아보겠습니다.

LESS 변수 원문보기

Variables

LESS 변수를 사용하면 이제 더이상 스타일 시트에 반복적으로 속성값을 선언하지 않을 수 있습니다.

우리는 다음과 같이 스타일시트를 작성하곤 합니다.

컴파일된 css

a,
.link {
  color: #428bca;
}
.widget {
  color: #fff;
  background: #428bca;
}

변수는 사용자가 하나의 위치 선언하여 값을 제어하는​​ 방법을 제공함으로써 유지보수 하기 쉽고 여러분의 코드를 간결하게 만들어 줄 것입니다.

less

// Variables
@link-color:        #428bca; // sea blue
@link-color-hover:  darken(@link-color, 10%);

// Usage
a,
.link {
  color: @link-color;
}
a:hover {
  color: @link-color-hover;
}
.widget {
  color: #fff;
  background: @link-color;
}

컴파일된 css

a,
.link {
  color: #428bca;
}
a:hover {
  color: #3071a9;
}
.widget {
  color: #fff;
  background: #428bca;
}

Variable Interpolation(변수 보간법)

위의 예제에서 CSS 규칙의 값을 제어하기 위해 변수를 사용하는 것에 포커스를 두었지만 변수는 또한 다른 곳에 배치하여 사용할 수 있습니다. 

예를 들어 선택자, 속성 이름, URL 또는 @import 문과 같은 곳에서 사용가능합니다.

보간법 : 주어진 변수에 대한 어떤 값을 구하거나 할당하는 일련의 과정을 의미한다.

@변수명 : 값; 이 있다면 @{변수명} 이처럼 사용합니다.

선택자에서 보간법 사용하기

less

// Variables
@my-selector: banner;

// Usage
.@{my-selector} {
	font-weight: bold;
	line-height: 40px;
	margin: 0 auto;
}

컴파일된 css

.banner {
  font-weight: bold;
  line-height: 40px;
  margin: 0 auto;
}

URL에서 사용하기

less

// Variables
@images: "../img";

// Usage
body {
	color: #444;
	background: url("@{images}/white-sand.png");
}

컴파일된 css

body {
  color: #444;
  background: url("../img/white-sand.png");
}

Import Statements(임포트 구문에서 사용하기)

LESS 버전 2.0.0 전에는 변수를 찾을 때 현재파일, 호출 파일만을 고려하고 루트 또는 현재 범위내에서 선언된 변수만 고려되고 있다는 점에 유의하시기 바랍니다.

less

// Variables
@themes: "../../src/themes";

// Usage
@import "@{themes}/tidal-wave.less";

Properties(속성에서 사용하기)

less

@property: color;

.widget {
	@{property}: #0ee;
	background-@{property}: #999;
}

컴파일된 css

.widget {
  color: #0ee;
  background-color: #999;
}

Variable Names(변수이름에서 사용하기)

변수이름에 변수를 사용할 수 있습니다.

less

@friend : "I have a friends.";
@overVar : 'friend'; // @friend 변수를 또 다른 변수로 사용하기 위해 문자열로 참조
.demo {
	content: @@overVar; // @(@overVar) -> @('friend') -> @friend -> "I have a friends." 로 치환된다.
	margin: 10px;
}

컴파일된 css

.demo {
  content: "I have a friends.";
  margin: 10px;
}

Lazy Loading

변수는 지연 로드할 수 있어서 사용하기 전에 미리 선언하지 않을 수 있습니다.

less

.lazy-eval {
	width: @var;
}

@var: @a;
@a: 9%;

컴파일된 css

.lazy-eval {
  width: 9%;
}

다음과 같은 코드도 유효합니다.

less

.lazy-eval-scope {
	width: @var;
	@a: 9%;
}

@var: @a;
@a: 100%;

컴파일된 css

.lazy-eval-scope {
  width: 9%;
}

변수를 두번 정의할 때 마지막 선언된 변수가 사용되고 현재 범위에서 위쪽으로 검색하며 사용됩니다.

less

@var: 0;
.class {
	@var: 1;
	.brass {
		@var: 2;
		three: @var;
		@var: 3;
	}
	one: @var;
}

컴파일된 css

.class {
  one: 1;
}
.class .brass {
  three: 3;
}

Jaehee's WebClub