2

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?

Improve this question
5
  • Cool effect. Anyway, you mean use css variable from styles.css in another file styles.scss? Commented Jul 1, 2022 at 15:09
  • @JoosepParts yes... Commented Jul 1, 2022 at 15:13
  • Using @import from a shared file didn't work? Commented Jul 1, 2022 at 16:02
  • @JoosepParts this trick didn't work Commented Jul 1, 2022 at 16:39
  • Are you sure your files are loaded in the correct order? Answer listed in your question works for me.. Commented Jul 4, 2022 at 20:01
Related questions
21
How to Assign CSS Variable Value to scss Variable or Expression
15
Access component variable inside SCSS file Angular 2
4
Scss Variable based on class
Load 7 more related questions Show fewer related questions

0

Reset to default

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.