Adding Styles to a Placeholder in LESS

Let's make a function that will add styles cross-browser via pseudo-element placeholder:

.placeholder(@code) {
	&::-webkit-input-placeholder {
		@code();
	}
	&:-ms-input-placeholder {
		@code();
	}
	&::-moz-placeholder {
		@code();
	}
	&::placeholder {
		@code();
	}
}

Let's use our function:

input {
	.placeholder({
		color: white; 
		background-color: red;
	});
}

Compilation result:

input::-webkit-input-placeholder {
	color: white; 
	background-color: red;
}
input::-ms-input-placeholder {
	color: white; 
	background-color: red;
}
input::-moz-placeholder {
	color: white; 
	background-color: red;
}
input::placeholder {
	color: white; 
	background-color: red;
}