How to use @property CSS variable inside SCSS

Asked Jul 01 '22 at 14:44

Active Jul 01 '22 at 14:44

Viewed 185 times

I have been struggling with how to use --rotate value from this CSS code inside my Angular SCSS code

CodePen: https://codepen.io/gayane-gasparyan/pen/jOmaBQK

@property --rotate {
  syntax: "<angle>";
  initial-value: 132deg;
  inherits: false;
}

.card::before {
  content: "";
  width: 104%;
  height: 102%;
  border-radius: 8px;
  background-image: linear-gradient(
    var(--rotate)
    , #5ddcff, #3c67e3 43%, #4e00c2);
    position: absolute;
    z-index: -1;
    top: -1%;
    left: -2%;
    animation: spin 2.5s linear infinite;
}

I have tried this answer but not working.... https://stackoverflow.com/a/70672476/4591364

may I get some help, please?

asked Jul 01 '22 at 14:44

solimanware

2,952
4
20
40

Cool effect. Anyway, you mean use css variable from styles.css in another file styles.scss? – Joosep Parts Jul 01 '22 at 15:09
@JoosepParts yes... – solimanware Jul 01 '22 at 15:13
Using `@import` from a shared file didn't work? – Joosep Parts Jul 01 '22 at 16:02
@JoosepParts this trick didn't work – solimanware Jul 01 '22 at 16:39
Are you sure your files are loaded in the correct order? Answer listed in your question works for me.. – Olivier Jul 04 '22 at 20:01

How to use @property CSS variable inside SCSS

0 Answers0