SCSS RGB variable gradient error

[toolman]

Hi,

I’m trying to create a gradient using variables, but I am getting an error.

This is what I’m trying to use:

$brand-blue: 29,177,245;
$brand-green: 77,222,170;

with:

background: rgb($brand-blue); /* Old browsers */
background: -moz-linear-gradient(left, rgba($brand-blue,1) 0%, rgba($brand-green,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, rgba($brand-blue,1) 0%,rgba($brand-green,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, rgba($brand-blue,1) 0%,rgba($brand-green,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$brand-blue', endColorstr='$brand-green',GradientType=1 ); /* IE6-9 */

any ideas how to get round this?

Thanks!

[SamA74]

Admittedly I know nothing about css preprocessors, but it seems to work if you do it this way.

$brand-blue: rgb(29,177,245);
$brand-green: rgb(77,222,170);

body {
  background: linear-gradient(to right, $brand-blue 0%, $brand-green 100%);
}

Since you were using full opacity, no need for rgba, and I would probably make life easier and lose the fall-backs, maybe just keep the plain colour one as a token gesture.

[PaulOB]

If you need rgba then you could break it down like this:

$brand-bluer: 295;
$brand-blueg: 177;
$brand-blueb: 245;

$brand-greenr: 77;
$brand-greeng: 222;
$brand-greenb: 170;
.test{
background: linear-gradient(to right, rgba($brand-bluer, $brand-blueg, $brand-blueb,0.5) 0%,rgba($brand-greenr,$brand-greeng, $brand-greenb,0.5) 100%); 
}

[SamA74]

@PaulOB

If you need rgba

The way I did it worked with RGBA too, that wasn’t an issue. I only removed it and mentioned it because it seemed pointless in this instance where both had an A value of 1.

[toolman]

Thanks, the $brand-blue: rgb(29,177,245); $brand-green: rgb(77,222,170);
method worked

[PaulOB]

Yes, I realised that you could do that if you don’t mind hard coding the transparency (which I assumed was to be separate as it may change for various elements etc).