placeholder text mixin

placeholder.less

// placeholder mixin
.placeholder (@el:~'[placeholder]') {
  @{el}::-webkit-input-placeholder { .styles; }
  @{el}:-ms-input-placeholder { .styles; }
  @{el}::input-placeholder { .styles; }
  @{el}:input-placeholder { .styles; }
  @{el}::-moz-placeholder { .styles; }
  @{el}:-moz-placeholder { .styles; }
  @{el}::placeholder { .styles; }
  @{el}:placeholder { .styles; }
}

usage.less

// nested example #1
#signup {
  .styles() {
    color: green;
  }
  .placeholder(~'[type="email"]');
}

// nested example #2
#contact {
  .styles() {
    color: red;
  }
  .placeholder(~'[type="name"]');
}

// stand alone example
// risky, as it becomes globally set and can be inherited in other style(instances)
.styles() {
  color: purple;
}
.placeholder(~'[type="search"]');