[Bug] SASS Can not comple

[nowpc2]

Version

3.0.2

Reproduction link

n/a

Operating System

Windows

Device

n/a

Browser & Version

n/a

Steps to reproduce

We are trying to compile the SASS and having issues.

C:\ProgramData\chocolatey\bin\sass.exe --style compressed --update staff.scss:F:\dev\assets\css\staff.min.css

What is expected?

Compiled CSS

What is actually happening?

SASS v1.48.0 on Windows

Error: Top-level selectors may not contain the parent selector "&".
╷
15 │ &.bg-gradient-faded-#{$prop}-vertical{
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
╵
..\mdp\3.0.2\scss\material-dashboard_gradients.scss 15:3 @import
..\mdp\3.0.2\scss\material-dashboard\theme.scss 43:9 @import
..\mdp\3.0.2\scss\material-dashboard\theme-pro.scss 20:9 @import
staff.scss 16:9

---

Solution

Additional comments

If this issue is because of our version of SASS, please advise which would work.

[nowpc2]

A quick update, using node-sass instead of dart sass seems to fix this issue for now.

[groovemen]

Hello @nowpc2,

Thank you for using our products, until the next product update we'll ask you to make the following changes:

• have to erase the '&' so it will look like this .bg-gradient-faded instead of &.bg-gradient-faded.

@each $prop, $value in $theme-colors {
  .bg-gradient-faded-#{$prop}-vertical{
    background-image: radial-gradient(200px circle at 50% 70%, rgba($value, .3) 0, $value 100%);
  }
}

Hope that information helps you. Please let us know if we can help you with anything else.

All the best,
Stefan