LESS에서 쉼표가 있는 파라미터

블록에 그림자를 생성하는 함수가 있다고 가정해 보겠습니다:

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

보시다시피, 우리 함수에는 하나의 파라미터가 있습니다. 이는 우리가 이 파라미터에 공백으로 구분된 그림자의 모든 값을 전달할 것임을 의미합니다. 다음과 같이요:

div {
	.shadow(1px 1px red);
}

그러나 CSS에서는 쉼표로 구분하여 여러 그림자를 지정할 수 있습니다. 우리의 경우 안타깝게도 쉼표가 함수의 파라미터 구분자로 인식되기 때문에 이렇게 할 수 없습니다:

div {
	.shadow(1px 1px red, 1px 1px blue); // 에러를 발생시킴
}

그러나 해결책이 있습니다. 우리는 LESS가 쉼표가 있는 문자열을 하나의 파라미터로 인식하도록 만들 수 있습니다. 이를 위해 값 목록을 세미콜론으로 끝내야 합니다:

div {
	.shadow(1px 1px red, 1px 1px blue;);
}

배경을 추가하는 함수를 만드세요. 이 함수를 사용하여 블록에 여러 배경을 추가하세요.