title: How can I use SCSS color functions to emulate a white transparent overlay?
body: <p>I'm trying to use SCSS to fake a white transparent color overlaying another solid color. I could easily do <code>background-color:rgba(255,255,255,.5)</code> on the overlay <code>&lt;div&gt;</code>, but I'd rather have a solution that doesn't require the browser to support rgba colors. Also, since I'm using SCSS variables, I won't necessarily know what the bottom color is beforehand, so I'll need to calculate the result.</p>
  
  <p>It seems like one of the <a href="http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html#scale_color-instance_method" rel="nofollow">SCSS color functions</a> should be able to achieve this effect, but I've tried a few things, and I can't seem to get it to work.</p>
  
  <p>Does anyone know how to do this?</p>
  
  <p>Here's a demo to better illustrate what I'm trying to do, or you can see the code pasted below.
  <a href="http://jsfiddle.net/BRKR3/" rel="nofollow">http://jsfiddle.net/BRKR3/</a></p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="background"&gt;
      &lt;div class="overlay rgba"&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="background"&gt;
      &lt;div class="overlay scss"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>SCSS</strong></p>
  
  <pre><code>$background: #009966;
  
  .background {
      background-color:$background;
      height:60px;
      margin:20px;
      padding:20px;
      width:60px;
  }
  
  .overlay {
     height:60px;
     width:60px;
  }
  
  .rgba {
      background-color:rgba(255,255,255,0.5);
  }
  
  /* works if $background is $808080, but not if it's a color */
  .scss {
      background-color:scale-color($background, $lightness:150%);
  }
  </code></pre>
  
  <p><br>
  <strong>UPDATE</strong><br></p>
  
  <p>Here's a working jsFiddle using Chuck's answer:
  <a href="http://jsfiddle.net/BRKR3/3/" rel="nofollow">http://jsfiddle.net/BRKR3/3/</a></p>