How to use gradient from Figma to SCSS?

Question

In figma, I have the following property. How to setup and use styles from figma in case of gradients. It is just showing the gradient as a variable and on next line, just the colors to setup gradients. Maybe I don't know, how to use figma. I need some help, or refer some doc how to use figma in dev mode.

border-bottom: 1.5px solid var(--Gradient-2, #FFF500);

Also, I have the gradient colors there
Gradient 2
 #FFF500
 Radial Gradient
 #FF7A00
 100%
 #FFC700
 38%
 Radial Gradient
 #FF8989
 92%
 #FFA96A
 57%
 Radial Gradient
 #F6FB22
 51%
 #FF9E45
 0%
 Radial Gradient
 #FFFFFF
 30%
 #FFFFFF
 0%

I'm not able to create and use in my HTML. I don't know, how to do this. 

In my root folder, I have added like this, and trying to import in my component. But it is not reflecting there.
:root {
  --Gradient-2: radial-gradient(
      closest-side,
      rgba(255, 255, 255, 0.3) 0%,
      rgba(255, 255, 255, 0) 100%
    ),
    radial-gradient(
      closest-side,
      rgba(246, 251, 34, 0.51) 0%,
      rgba(255, 158, 69, 0) 100%
    ),
    radial-gradient(
      closest-side,
      rgba(255, 137, 137, 0.92) 21.246936917304993%,
      rgba(255, 169, 106, 0.57) 88.62413167953491%
    ),
    radial-gradient(
      closest-side,
      rgba(255, 122, 0, 1) 67.58895516395569%,
      rgba(255, 199, 0, 0.38) 100%
    );
}


I have tried to import in my component.But is not reflecting and gradient is not poping up. Maybe I have done something wrong
@import "../../../styles.scss";```