Cacher is the code snippet organizer for pro developers

<input type="email" placeholder="example@gmail.com" class="input">

.input {
  padding: .5rem;
}

.input::-webkit-input-placeholder {
  color: #aaa;
  opacity: 1;
  transition: opacity 200ms;
}

.input:-moz-placeholder {
  color: #aaa;
  opacity: 1;
  transition: opacity 200ms;
}

.input::-moz-placeholder {
  color: #aaa;
  opacity: 1;
  transition: opacity 200ms;
}

.input:-ms-input-placeholder {
  color: #aaa;
  opacity: 1;
  transition: opacity 200ms;
}

.input:focus::-webkit-input-placeholder {
  opacity: 0;
}

.input:focus:-moz-placeholder {
  opacity: 0;
}

.input:focus::-moz-placeholder {
  opacity: 0;
}

.input:focus:-ms-input-placeholder {
  opacity: 0;
}

::-webkit-input-placeholder {
  color: blue;
}

:-moz-placeholder {
  color: blue;
}

::-moz-placeholder {
  color: blue;
}

:-ms-input-placeholder {
  color: blue;
}

// ----
// libsass (v3.3.2)
// ----

@mixin placeholder {
  &::-webkit-input-placeholder {@content}
  &:-moz-placeholder           {@content}
  &::-moz-placeholder          {@content}
  &:-ms-input-placeholder      {@content}  
}

.input {
  padding: .5rem;
  
  @include placeholder {
    color: #aaa;
    opacity: 1;
    transition: opacity 200ms;
  }
  
  &:focus {
    @include placeholder {
      opacity: 0;
    }
  }
}

@include placeholder {
  color: blue;
}

<input type="email" placeholder="example@gmail.com" class="input">