LESS에는 특별한 유형의 룰셋이 있습니다. 이것은 클래스처럼 mix in 할 수 있고, 인자를 넘겨받습니다. 다음은 고전적인 예입니다 :
1 2 3 4 5 | .border-radius (@radius) { border-radius: @radius; -moz-border-radius: @radius; -webkit-border-radius: @radius;} |
다음은 이것을 다양한 룰셋으로 믹스하는 방법입니다:
1 2 3 4 5 6 | #header { .border-radius(4px);}.button { .border-radius(6px);} |
인자를 갖는 믹스인은 인자의 디폴트 값을 가질 수도 있습니다:
1 2 3 4 5 | .border-radius (@radius: 5px) { border-radius: @radius; -moz-border-radius: @radius; -webkit-border-radius: @radius;} |
이제 이것을 호출하려면 다음과 같이 하세요:
1 2 3 | #header { .border-radius;} |
그러면 5px의 border-radius를 포함합니다.
인자를 갖는 믹스인인데 인자를 넘겨받지 않는 믹스인을 쓸 수도 있습니다. 이것은 CSS 결과물에서 룰셋을 숨기되, CSS 결과물의 속성을 다른 룰셋에다가 포함시켜야할 때 유용합니다.
1 2 3 4 5 6 7 | .wrap () { text-wrap: wrap; white-space: pre-wrap; white-space: -moz-pre-wrap; word-wrap: break-word;}pre { .wrap } |
다음과 같이 만들어냅니다:
1 2 3 4 5 6 | pre { text-wrap: wrap; white-space: pre-wrap; white-space: -moz-pre-wrap; word-wrap: break-word;} |
@arguments 변수에 대해서
@arguments는 믹스인 안에서 특별한 의미가 있습니다. 믹스인을 호출할 때, @arguments는 넘겨받은 인자를 모두 가지고 있습니다. 인자들을 개별적으로 다루는 경우가 아니라면, 매우 유용합니다.
1 2 3 4 5 6 | .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); |
결과는 다음과 같습니다:
1 2 3 | box-shadow: 2px 5px 1px #000; -moz-box-shadow: 2px 5px 1px #000; -webkit-box-shadow: 2px 5px 1px #000; |
