LESS Loops & Merge

Loop 그리고 Merge

이 글에서는 LESS의 루프 작성과 병합에 대해 알아봅니다.

LESS Loops & Merge 원문보기

Loops

LESS 믹스인은 믹스인 내부에서 자신을 호출할 수 있습니다.

믹스인을 반복하여 실행하려고 할 경우에 가드 표현식과 패턴 매칭을 조합하여 다양한 루프 구조를 만들어 사용할 수 있습니다.

다음의 코드를 살펴봅니다.

less

.loop(@counter) when (@counter > 0) {
	.loop((@counter - 1));    // 반복 처리
	width: (10px * @counter); // 각각의 반복처리를 위한 코드
}

div {
	.loop(5); // 루프 실행
}

컴파일된 css

div {
  width: 10px;
  width: 20px;
  width: 30px;
  width: 40px;
  width: 50px;
}

CSS 그리드 시스템을 위해 그리드 클래스를 생성하고자 할 때 다음과 같이 작성할 수 있습니다.

less

.generate-columns(@n, @i: 1) when (@i =< @n) {
	.column-@{i} {
		width: (@i * 100% / @n);
	}
	// 처음에 하단에서 호출한 @n 과 @i :1 이 실행
	// 1 * 100% / 4 = 25%
	.generate-columns(@n, (@i+1)); // 믹스인 내부에서 믹스인 자신을 호출하여 반복시킴
	// .generate-columns(4, (1 + 1))
	// 2 * 100% /4 = 50%

	// .generate-columns(4, (2 + 1));
	// 3 * 100% /4 = 75%

	// .generate-columns(4, (3 + 1));
	// 3 * 100% /4 = 100%
}

.generate-columns(4);

컴파일된 css

.column-1 {
  width: 25%;
}
.column-2 {
  width: 50%;
}
.column-3 {
  width: 75%;
}
.column-4 {
  width: 100%;
}

Merge(속성 결합하기)

merge의 특징은 단일 속성으로 콤마 또는 공백으로 구성된 목록을 여러 속성으로 병합할 수 있습니다.

merge 는 background나 transform 과 같은 속성에 사용하면 유용합니다.

Comma(콤마를 추가하여 병합하기)

콤마(,)로 속성값을 추가할 수 있습니다.

다음의 코드를 살펴봅니다.

less

.merge-mixin() {
	box-shadow+: inset 0 0 10px #555;
}
.merge-class {
	.merge-mixin();
	box-shadow+: 0 0 20px black;
}

컴파일된 css

.merge-class {
  box-shadow: inset 0 0 10px #555, 0 0 20px black; /* 콤마로 병합된다 */
}

다음은 transform 속성값들을 병합시키고 있습니다.

less

.first-transform() {
	transform+: rotate(90deg) skew(30deg);
}
.second-transform() {
	transform+: scale(2,4);
}
.test1 {
	// 속성값 병합하기
	.first-transform();
	.second-transform();
}

컴파일된 css

.test1 {
  transform: rotate(90deg) skew(30deg), scale(2, 4);
}

Space(공백으로 병합하기)

공백으로 속성값들을 병합시킬 수 있습니다.

less

.space-merge() {
	transform+_: scale(2);
}
.space-class {
	.space-merge();
	transform+_: rotate(15deg);
}

컴파일된 css

.space-class {
  transform: scale(2) rotate(15deg);
}

위 코드에서 보았다시피 병합시킬 때는 + 또는 +_ 플래그를 사용해야 합니다.

+ 플래그는 콤마로 병합시키고 +_ 플래그는 빈 공백으로 병합시킬 수 있습니다.

Jaehee's WebClub