title: how to add opacity to scss variable?
body: <p>I am wondering if it is possible to add the opacity element to a sass variable? I am working on a project where I need to create different shades of a color and use them in custom typography file. My problem is when I create a color variable in rdga and implement it into my work the variable changes the code to a CSS opacity element which is written under a color element then this gets ran through the browser and throws and error. Is there a certain way to implement opacity in a variable so you don't get this problem?</p>
  
  <p>Any help would be great, thanks</p>
  
  <p>here are my variables:</p>
  
  <pre><code>   $white-text-dh: rgba(255, 255, 255, 0.5);
     $white-text-d: rgba(255, 255, 255, 0.12);
  </code></pre>
  
  <p>here is the typography ex:</p>
  
  <pre><code>  .c-title{
              font-size:20px;
              color: $white-text-d;
              font-family: Roboto-Light;
           }
  </code></pre>
  
  <p>here is the html </p>
  
  <pre><code>         &lt;span class="c-title"&gt;hello&lt;/span&gt;
  </code></pre>
  
  <p>this is what reads in the developer tools with an error going through the color. the color element can not read opacity</p>
  
  <pre><code>      .c-title {
                  font-size: 20px;
                  color: #ffffff opacity 0.7%;
                  font-family: Roboto-Light;
                  }
  </code></pre>