Change placeholder opacity when Focus input

Question

I need to change the opacity of the placeholder when input in Focus but not getting in Sass

Html

<input type="text" name="search_cursos" id="search_cursos" placeholder="Procure a vaga que deseja" class="procurarvaga">

My scss

input.procurarvaga{
        text-align: center;
        &:focus{
            @include placeholder {
                @include opacity(.2);
            }
        }
    }

Mixins

@mixin opacity($opacity) {
  opacity: $opacity;
  // IE8 filter
  $opacity-ie: ($opacity * 100);
  filter: alpha(opacity=$opacity-ie);
}

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

My code https://jsfiddle.net/fcothiagofreitas/ubxzswkw/

Here with css works but can not put to work with Sass http://jsfiddle.net/XDutj/27/

Answer 1

I tested the code in Codepen and what happened was that the placeholders were nested with the parent selector instead of glued to it. Using the &, that functions as a this, a reference to the parent selector, the selector starts working and applies the style to the placeholder of the element with Focus.

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

http://codepen.io/VitorLuizC/pen/XMPaBz/