패턴 매칭과 가드 표현식

때로는 여러분이 넘겨주는 인자에 따라 믹스인이 다르게 행동하도록 하고 싶을 수도 있습니다. 간단한 예를 살펴 봅시다:

.mixin (@s, @color) { ... }

.class {
 .mixin(@switch, #888);
}

이제는, .mixin이 @switch에 따라서 다른 행동을 하고 싶은 상황에 대해 살펴 봅시다. .mixin을 다음처럼 정의하면 돼요 :

.mixin (dark, @color) {
 color: darken(@color, 10%);
}
.mixin (light, @color) {
 color: lighten(@color, 10%);
}
.mixin (@_, @color) {
 display: block;
}

자, 이제 실행을 하면:

@switch: light;

.class {
 .mixin(@switch, #888);
}

다음의 CSS를 얻습니다:

.class {
 color: #a2a2a2;
 display: block;
}

.mixin에 색상을 넘겨준 곳에는, 색상이 밝아졌습니다. @switch의 값이 dark인 경우에는 색상이 어두워졌습니다.
아래에는 결과가 나옵니다:

• 첫번째 믹스인 정의는 들어맞지 않습니다. 왜냐하면 첫번째 인자로 dark가 올거라고 예상했기 때문입니다.
• 두번째 정의는 들어맞습니다. 왜냐하면 인자로 light가 올거라고 예상했기 때문입니다.
• 세번째 정의는 들어맞습니다. 왜냐하면 어떤 값이 인자로 와도 상관없기 때문입니다.

들어맞는 믹스인 정의만 사용됩니다. 변수가 들어맞으면, 값이 무엇인지에 관계없이 연결(bind)됩니다. 변수가 아닌 경우에는, 자신과 똑같은 것 하고만 들어맞습니다.

인자의 개수에 대해서도 들어맞는지 확인할(match) 수 있습니다. 다음 예를 보시죠:

.mixin (@a) {
 color: @a;
}
.mixin (@a, @b) {
 color: fade(@a, @b);
}

이제, .mixin을 인자 하나로 호출하면, 위쪽 선언의 출력을 얻습니다. 그러나 두 개의인자를 넘겨주면, 아래쪽 선언을 부릅니다. 즉 @a에서 @b로 변하는(fade) 색을 얻을 수 있습니다 .

가드(Guards)

단순히 값이나 인자의 개수(arity)가 아니라, 표현식(expression)과 일치하는 것을 찾을 때에, 가드가 유용합니다. 함수형 프로그래밍이 익숙하시다면, 가드라는 개념을 이미 아실 겁니다.

CSS

CSS의 본래 정의를 충실하게 반영하기 위해서 LESS는 if/else 대신에 미디어 퀄리에 있는 기능인 가드된 믹스인은 채택했다. 예를들면 아래와 같습니다.

In trying to stay as close as possible to the declarative nature of CSS, LESS has opted to implement conditional execution via guarded mixins instead of if/else statements, in the vein of @media query feature specifications.
Let’s start with an example:

.mixin (@a) when (lightness(@a) >= 50%) {
 background-color: black;
}
.mixin (@a) when (lightness(@a) < 50%) {
 background-color: white;
}
.mixin (@a) {
 color: @a;
}

The key is the when keyword, which introduces a guard sequence (here with only one guard). Now if we run the following code:

.class1 { .mixin(#ddd) }
.class2 { .mixin(#555) }

다음의 결과를 얻을 겁니다:

.class1 {
 background-color: black;
 color: #ddd;
}
.class2 {
 background-color: white;
 color: #555;
}

다음은 가드(guards)안에서 사용할 수 있는 비교 연산자를 모두 나열한 것입니다. > >= = =< <. 또한 true 키워드는 유일하게 truthy한 값입니다. 그리고 이 키워드는 두 개의 믹스인을 같게 만듭니다:

.truth (@a) when (@a) { ... }
.truth (@a) when (@a = true) { ... }

Any value other than the keyword true is falsy:

.class {
 .truth(40); // Will not match any of the above definitions.
}

Guards can be separated with a comma ‘,’—if any of the guards evaluates to true, it’s considered as a match:

가드는 콤마로 구분할 수

.mixin (@a) when (@a > 10), (@a < -10) { ... }

기억하세요 - 인자를 다른 인자하고 비교할 수도 있고, 인자가 아닌 것과 인자를 비교할 수도 있습니다:

@media: mobile;

.mixin (@a) when (@media = mobile) { ... }
.mixin (@a) when (@media = desktop) { ... }

.max (@a, @b) when (@a > @b) { width: @a }
.max (@a, @b) when (@a < @b) { width: @b }

마지막으로, 값의 자료형에 따라 믹스인을 찾으려면, is*함수를 사용하세요:

.mixin (@a, @b: 0) when (isnumber(@b)) { ... }
.mixin (@a, @b: black) when (iscolor(@b)) { ... }

다음은 자료형을 검사하는 기본적인 함수입니다:

• iscolor
• isnumber
• isstring
• iskeyword
• isurl

어떤 값이 수일 때, 이 수가 특정 단위로 쓰였는지 알려고 할 때에는 다음 중 하나를 사용하세요:

• ispixel
• ispercentage
• isem

마지막으로 (마지막이라고 해서 안 중요한 건 아닙니다) 가드 안에 조건을 추가하려면 and키워드를 사용하세요:

.mixin (@a) when (isnumber(@a)) and (@a > 0) { ... }

그리고 무엇이 아닐 때,처럼 조건을 부정하려면 not 키워드를 써 주세요:

.mixin (@b) when not (@b > 0) { ... }