title: SASS @extend directive not working with input placeholders
body: <p>I have a ReactJS app, with CSS styles set for the placeholder values inside of text inputs using SASS. The following code works without problem (I've ommitted styles for other browser vendors, so I'll only show webkit):</p>
  
  <pre><code>*::-webkit-input-placeholder {
      color: rgb(126, 126, 126);
      transition: color .25s linear;
  }
  
  input:focus::-webkit-input-placeholder {
      color: rgb(187, 187, 187);
  }
  
  ... others emitted for brevity ...
  </code></pre>
  
  <p>But because I have the same style for other browser vendors, ie <code>*:-moz-placeholder</code>, <code>*::placeholder</code>, etc., I wanted to use an <code>@extend</code> directive to keep my code DRY. <strong>However, the following code does not work</strong>:</p>
  
  <pre><code>%shared-placeholder {
      color: rgb(126, 126, 126);
      transition: color .25s linear;
  }
  
  %shared-placeholder-focus {
      color: rgb(187, 187, 187);
  }
  
  *::-webkit-input-placeholder {
      @extend %shared-placeholder;
  }
  
  input:focus::-webkit-input-placeholder {
      @extend %shared-placeholder-focus;
  }
  
  ... others emitted for brevity ...
  </code></pre>
  
  <p>There is no compilation error, and I am using the <code>@extend</code> directive in other places in my app without problem, it just doesn't seem to work with the placeholder inputs. I don't understand why, as I assume the SASS compiler simply replaces the <code>@extend</code> directive with the actual style. <strong>EDIT</strong>: Turns out my assumption was wrong, see my answer below on how SASS compiles @extend directives to css.</p>