LESS에서 쉼표로 결합하기

블록에 그림자를 생성하는 함수가 있다고 가정해 봅시다:

.shadow(@s) {
	box-shadow: @s;
}

우리의 함수를 두 번 호출하여 블록에 두 개의 그림자를 추가하고 싶다고 가정해 봅시다:

p {
	.shadow(1px 1px red); 
	.shadow(2px 2px blue);
}

그러나, 우리는 아무것도 얻지 못할 것입니다. 왜냐하면 두 그림자를 호출하면 단순히 두 개의 속성이 추가되기 때문입니다 box-shadow:

p {
	box-shadow: 1px 1px red;
	box-shadow: 2px 2px blue;
}

우리는 그림자가 하나의 속성에 쉼표로 추가되기를 원합니다. box-shadow, 다음과 같이:

p {
	box-shadow: 1px 1px red, 2px 2px blue;
}

우리의 함수가 설명된 방식으로 작동하게 하려면, 속성 값을 특수 연산자 뒤에 작성해야 합니다 +:, 다음과 같이:

.shadow(@s) {
	box-shadow+: @s;
}

속성에 대해 유사한 함수를 만드세요 text-shadow.

속성에 대해 유사한 함수를 만드세요 background.