본문으로 바로가기

LESS 변수

category StyleSheet/LESS 2016. 9. 29. 09:34

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


'StyleSheet > LESS' 카테고리의 다른 글

LESS Parametric Mixins  (0) 2016.09.29
LESS 변수 & 믹스인(Mixins)  (2) 2016.09.29
LESS Syntax 시작하기  (0) 2016.09.29
LESS 사용 방법(컴파일)  (0) 2016.09.29
Modern web LESS Framework(모던 웹 less 프레임워크)  (0) 2016.09.29