sass compilation error

[stolenricecakes]

What MDC Web Version are you using?

"material-components-web": {
  "version": "0.30.0",
  "requires": {
    "@material/animation": "0.25.0",
    "@material/auto-init": "0.30.0",
    "@material/base": "0.29.0",
    "@material/button": "0.30.0",
    "@material/card": "0.30.0",
    "@material/checkbox": "0.30.0",
    "@material/chips": "0.30.0",
    "@material/dialog": "0.30.0",
    "@material/drawer": "0.30.0",
    "@material/elevation": "0.28.0",
    "@material/fab": "0.30.0",
    "@material/form-field": "0.30.0",
    "@material/grid-list": "0.30.0",
    "@material/icon-toggle": "0.30.0",
    "@material/layout-grid": "0.24.0",
    "@material/line-ripple": "0.30.0",
    "@material/linear-progress": "0.30.0",
    "@material/list": "0.30.0",
    "@material/menu": "0.30.0",
    "@material/radio": "0.30.0",
    "@material/ripple": "0.30.0",
    "@material/rtl": "0.30.0",
    "@material/select": "0.30.0",
    "@material/selection-control": "0.30.0",
    "@material/slider": "0.30.0",
    "@material/snackbar": "0.30.0",
    "@material/switch": "0.30.0",
    "@material/tabs": "0.30.0",
    "@material/textfield": "0.30.0",
    "@material/theme": "0.30.0",
    "@material/toolbar": "0.30.0",
    "@material/typography": "0.28.0"
  }

What browser(s) is this bug affecting?

N/A - sass build error.

What OS are you using?

Red Hat Enterprise Linux Workstation release 7.3 (Maipo)

What are the steps to reproduce the bug?

1. npm install --save material-components-web
2. echo -e "\$mdc-theme-primary: #263746;\n@import \"material-components-web/material-components-web.scss\";" > test.scss
3. sass -I node_modules/ test.scss material-components-web.css
   produces the following stack trace:

Error: Base-level rules cannot contain the parent-selector-referencing character '&'.
on line 52 of /shared/bonus/node_modules/@material/checkbox/_mixins.scss, in `mdc-checkbox-container-colors'
from line 34 of /shared/bonus/node_modules/@material/checkbox/mdc-checkbox.scss
from line 20 of /shared/bonus/node_modules/material-components-web/material-components-web.scss
from line 1 of test.scss
Use --trace for backtrace.

What is the expected behavior?

Should produce a .css file from the sass with custom primary color.

What is the actual behavior?

produces sass error and no .css file is created.

Any other information you believe would be useful?

[kfranqueiro]

I think this is happening due to a mixin invocation we lifted to @at-root, however I've been unable to reproduce this error, which would help for confirming that we fix it.

What version of sass or node-sass are you running?

[light-flight]

I've reproduced this error with the steps above using Sass 3.5.5 (Bleeding Edge).
Commenting out the @material/checkbox component removes the issue

[stolenricecakes]

I was using Sass 3.5.3 (Bleeding Edge).

[kfranqueiro]

Ah I see, I can reproduce this with the Sass ruby gem, but wasn't able to reproduce it via node-sass. Working on a fix now that I know how to test whether it's broken.

[kfranqueiro]

I have PR #2238 out to fix this for our next release.

In the interim, a couple of other options:

• Apply the patch from the PR to your installed copy of @material/checkbox/_mixins.scss
• Compile with node-sass instead of the sass gem

[stolenricecakes]

The PR works great for me. Thank you for your help!

[tjmosia]

I have just experienced the same issue with most of the _mixins in material-design.

Just to reference one of them:
SassError: Base-level rules cannot contain the parent-selector-referencing character '&'.
on line 199 of node_modules/@material/button/_mixins.scss, in mixin mdc-button-container-fill-color

Installed node-sass version: 4.13.0.

So basically this is a compiler issue?

This error occured the moment I was trying to theme my components. When I import mixins.