Set HTML5 Input's Placeholder Style with CSS

index.html

<form action="">
  <input type="text" name="fname" placeholder="Your First Name">
</form>

main.css

input[type="text"]::-webkit-input-placeholder {
    color: red;
}

input[type="text"]:-moz-placeholder {
    color: #0db1ff;  /* Firefox 4-18 */
}

input[type="text"]::-moz-placeholder {
    color: #0db1ff;  /* Firefox 19+ */
}

input[type="text"]:-ms-input-placeholder {
    color: #0db1ff; /* IE10+ */
}

input[type="text"]::-ms-input-placeholder {
    color: #0db1ff; /* Edge */
}

input[type="text"]::placeholder { 
    color: #0db1ff; /* Modern browsers */
}

main.sass

@mixin placeholder($color) {
    &::-webkit-input-placeholder {
        color: $color;
    }
    &:-moz-placeholder {
        color: $color;
    }
    &::-moz-placeholder {
        color: $color;
    }
    &:-ms-input-placeholder {
        color: $color;
    }
    &::-ms-input-placeholder {
        color: $color;
    }
    &::placeholder {
        color: $color;
    }
}