-1

I am writing HTML template with SASS.

What I want to achieve is whenever my client change the main template color, the box-shadow color will also be changed and match with the template color.

I have a main template color variable and box shadow mixin.

$template-color: #6c8ce2;

Box shadow color

@mixin box-shadow($amount,$blur,$spread,$opacity) {
  box-shadow: $amount $blur $spread rgba(49, 2, 190, $opacity);
  -webkit-box-shadow: $amount $blur $spread rgba(49, 2, 190, $opacity);
  -moz-box-shadow: $amount $blur $spread rgba(49, 2, 190, $opacity);
}

Here, as rgba color code is different with the main template color.This will not work. So I try to achieve it with two options as below.

Method One
I try to replace rgba color with $template-color something like this 

box-shadow: $amount $blur $spread $template-color;

But the problem is the box shadow's opacity need to be very soft and transparent.

Example box shadow image is here

I can't achieve it without using RGBA's opacity.

Method two
I also try adding an alpha hex behind $template-color like this.

box-shadow: $amount $blur $spread $template-color+2b

The method two problem is every color has its' own alpha hex. It's dynamic and I can't guess it.

Can I achieve it without using javascript?

3rdthemagical
  • 5,271
  • 18
  • 36
Poe Eain
  • 73
  • 1
  • 9

1 Answers1

0

Change your mixin like this to genarate the RGBA from your $template-color:

@mixin box-shadow($amount, $blur, $spread, $opacity, $template-color) {
  $red: red($template-color);
  $blue: blue($template-color);
  $green: green($template-color);
  box-shadow: $amount $blur $spread rgba($red, $green, $blue, $opacity);
  -webkit-box-shadow: $amount $blur $spread rgba($red, $green, $blue, $opacity);
  -moz-box-shadow: $amount $blur $spread rgba($red, $green, $blue, $opacity);
}

Update:

I have found that the rgba function accepts two patameters (color and opacity) and you can do this simpler:

@mixin box-shadow($amount, $blur, $spread, $opacity, $template-color) 
{
  box-shadow: $amount $blur $spread rgba($template-color, $opacity);
  -webkit-box-shadow: $amount $blur $spread rgba($template-color, $opacity);
  -moz-box-shadow: $amount $blur $spread rgba($template-color, $opacity);
}
Mahdi Aryayi
  • 1,090
  • 7
  • 13
  • uh, This is like a hack, I don't even know this exists. Thank you so much @Mahdi. – Poe Eain Jul 25 '18 at 05:03
  • I have searched and found out that you don't even need this hack! the `rgba` function accepts two parameters and can combine a color with an opacity. I will Update my answer. – Mahdi Aryayi Jul 25 '18 at 05:06
  • I should have tried RGBA with two parameters :D. The update one is better. Thanks again. – Poe Eain Jul 25 '18 at 05:16