HEX TO RGBA SCSS

by Chandra Shekhar

HTML

<div class="box">
  
</div>

<div class="transparentBox box"></div>

SCSS

.box {
height: 50px;
width: 50px;
background-color: red;
}

 @mixin hex-rgba($hexcolor, $opacity) {
  @if $opacity == 1 or $opacity == 100% {

  background-color:hex($hexcolor);
  }
  @else {
   background-color: rgba($hexcolor, $opacity);
  }
}

@function hex($hexcolor){
  $red:red($hexcolor);
  $green:green($hexcolor);
  $blue:blue($hexcolor);
  $alpha:alpha($hexcolor);
  @return unquote("rgba(#{$red},#{$green},#{$blue},#{$alpha})");
}

.box {
  @include hex-rgba(#333333, 100%);
  margin:20px;
}

.transparentBox{
  @include hex-rgba(#333333,0.5);
}