인자를 갖는 믹스인

LESS에는 특별한 유형의 룰셋이 있습니다. 이것은 클래스처럼 mix in 할 수 있고, 인자를 넘겨받습니다. 다음은 고전적인 예입니다 :

.border-radius (@radius) {
 border-radius: @radius;
 -moz-border-radius: @radius;
 -webkit-border-radius: @radius;
}

다음은 이것을 다양한 룰셋으로 믹스하는 방법입니다:

#header {
 .border-radius(4px);
}
.button {
 .border-radius(6px);
}

인자를 갖는 믹스인은 인자의 디폴트 값을 가질 수도 있습니다:

.border-radius (@radius: 5px) {
 border-radius: @radius;
 -moz-border-radius: @radius;
 -webkit-border-radius: @radius;
}

이제 이것을 호출하려면 다음과 같이 하세요:

#header {
 .border-radius;
}

그러면 5px의 border-radius를 포함합니다.
인자를 갖는 믹스인인데 인자를 넘겨받지 않는 믹스인을 쓸 수도 있습니다. 이것은 CSS 결과물에서 룰셋을 숨기되, CSS 결과물의 속성을 다른 룰셋에다가 포함시켜야할 때 유용합니다.

.wrap () {
 text-wrap: wrap;
 white-space: pre-wrap;
 white-space: -moz-pre-wrap;
 word-wrap: break-word;
}
pre { .wrap }

다음과 같이 만들어냅니다:

pre {
 text-wrap: wrap;
 white-space: pre-wrap;
 white-space: -moz-pre-wrap;
 word-wrap: break-word;
}

@arguments 변수에 대해서

@arguments는 믹스인 안에서 특별한 의미가 있습니다. 믹스인을 호출할 때, @arguments는 넘겨받은 인자를 모두 가지고 있습니다. 인자들을 개별적으로 다루는 경우가 아니라면, 매우 유용합니다.

.box-shadow (@x: 0, @y: 0, @blur: 1px, @color: #000) {
 box-shadow: @arguments;
 -moz-box-shadow: @arguments;
 -webkit-box-shadow: @arguments;
}
.box-shadow(2px, 5px);

결과는 다음과 같습니다:

box-shadow: 2px 5px 1px #000;
 -moz-box-shadow: 2px 5px 1px #000;
 -webkit-box-shadow: 2px 5px 1px #000;