Placeholder Mixin SCSS/CSS

Question

I\'m trying to create a mixin for placeholders in sass.

This is the mixin I\'ve created.

@mixin placeholder ($css) {
  ::-webkit-input-placeholder {         


        

Answer 1

Why not something like this?

It uses a combination of lists, iteration, and interpolation.

@mixin placeholder ($rules) {

  @each $rule in $rules {
    ::-webkit-input-placeholder,
    :-moz-placeholder,
    ::-moz-placeholder,
    :-ms-input-placeholder {
      #{nth($rule, 1)}: #{nth($rule, 2)};
    }  
  }
}

$rules: (('border', '1px solid red'),
         ('color', 'green'));

@include placeholder( $rules );