CODEWITHSUNDEEP
cssvariablessassmaterialize
sportsman
sportsman

Reputation: 79

how to add opacity to scss variable?

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?

Any help would be great, thanks

here are my variables:

   $white-text-dh: rgba(255, 255, 255, 0.5);
   $white-text-d: rgba(255, 255, 255, 0.12);

here is the typography ex:

  .c-title{
            font-size:20px;
            color: $white-text-d;
            font-family: Roboto-Light;
         }

here is the html 

         <span class="c-title">hello</span>

this is what reads in the developer tools with an error going through the color. the color element can not read opacity

      .c-title {
                font-size: 20px;
                color: #ffffff opacity 0.7%;
                font-family: Roboto-Light;
                }

Upvotes: 5

Views: 6135

Answers (1)

placeholder
placeholder

Reputation: 182

I tested this and it works for me:

SCSS

$white: #fff;

$white-text-dh: rgba($white, .5);

.c-title {
     color: $white-text-dh;
}

HTML

<h1 class="c-title">Test</h1>

Upvotes: 9

Related Questions