CODEWITHSUNDEEP
sasscss-variablesscss-mixins
Miomir Dancevic
Miomir Dancevic

Reputation: 6852

Convert opacity with var scss sass

I have some property like this

::root {
  --light-grey: #EFEFEF;
}

.content-wrapper {
  background-color: rgba(#EFEFEF, .4);
  border-radius: 8px;
  padding: 25px 33px;
}

But when I try

.content-wrapper {
  background-color: rgba(var(--light-grey), .4);
  border-radius: 8px;
  padding: 25px 33px;
}

This does not works, grey background color is not shown?

Upvotes: 3

Views: 5942

Answers (1)

Yaroslav Trach
Yaroslav Trach

Reputation: 2011

Unfortunately, you can't use HEX variables with alpha. But you can convert HEX color into RGB-version of this color and use it like CSS variable with alpha transparency you want.

--color-primary: #ff6347;
--color-primary-rgb: 255, 99, 71;
...

This code won't work:

color: rgba(var(--color-primary), .5);

but this will:

color: rgba(var(--color-primary-rgb), .5);

So, let say we have SCSS map of colors, we can generate CSS variables for HEX and RGB, generate classes with backgrounds:

$colors: (
  "primary": #ff6347,
  "secondary": #962ba2
);

// generating root variables
:root {
  @each $color, $value in $colors {
    --color-#{$color}: #{$value};
    --color-#{$color}-rgb: #{red($value)}, #{green($value)}, #{blue($value)};
  }
}

// generate backgrounds HEX, RGB variants
@mixin background {
  @each $color, $value in $colors {
    &-#{$color} {
      background: var(--color-#{$color});
    }
    
    &-#{$color}-rgb {
      --opacity: .5;
      background: rgba(var(--color-#{$color}-rgb), var(--opacity));
    }
  }
}

.bg {
  @include background;
}

Output of this SCSS code will be:

:root {
  --color-primary: #ff6347;
  --color-primary-rgb: 255, 99, 71;
  --color-secondary: #962ba2;
  --color-secondary-rgb: 150, 43, 162;
}

.bg-primary {
  background: var(--color-primary);
}
.bg-primary-rgb {
  --opacity: .5;
  background: rgba(var(--color-primary-rgb), var(--opacity));
}
.bg-secondary {
  background: var(--color-secondary);
}
.bg-secondary-rgb {
  --opacity: .5;
  background: rgba(var(--color-secondary-rgb), var(--opacity));
}

Here is Code Snippet demo, and link to CodePen with this code:

:root {
  --color-primary: #ff6347;
  --color-primary-rgb: 255, 99, 71;
  --color-secondary: #962ba2;
  --color-secondary-rgb: 150, 43, 162;
}

.bg-primary {
  background: var(--color-primary);
}

.bg-primary-rgb {
  --opacity: .5;
  background: rgba(var(--color-primary-rgb), var(--opacity));
}

.bg-secondary {
  background: var(--color-secondary);
}

.bg-secondary-rgb {
  --opacity: .5;
  background: rgba(var(--color-secondary-rgb), var(--opacity));
}

body {
  background: #1d1e22;
}

.row {
  display: flex;
  column-gap: 0.25rem;
  margin-bottom: 1rem;
}

.sq {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-weight: bold;
  width: 10rem;
  aspect-ratio: 1/1;
}
<div class="row">
  <div class="sq bg-primary">
    primary
  </div>
  <div class="sq bg-primary-rgb">
    primary <br /> opacity 0.5
  </div>

  <div class="sq bg-primary-rgb" style="--opacity: .3">
    primary <br /> opacity 0.3
  </div>
</div>

<div class="row">
  <div class="sq bg-secondary">
    secondary
  </div>
  <div class="sq bg-secondary-rgb">
    secondary <br /> opacity 0.5
  </div>

  <div class="sq bg-secondary-rgb" style="--opacity: .7">
    secondary <br /> opacity 0.7
  </div>
</div>

Upvotes: 3

Related Questions