Cannot create theme. "Mixins may not be defined within control directives or other mixins."

[Nathan-Ryan]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

The .scss file compiles.

What is the current behavior?

Scss complier (I'm using VS2017 and Web Compiler) throws an error "Mixins may not be defined within control directives or other mixins.".

What are the steps to reproduce?

Importing the theming file from material seems to cause the error.
@import "../node_modules/@angular/material/theming";

What is the use-case or motivation for changing an existing behavior?

Migration from 2.0.0-beta.6 to 2.0.0-beta.7

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular: 4.2.2
Material: 2.0.0-beta.7
OS: Windows 10
TypeScript: 2.3.4

[Nathan-Ryan]

Found the culprit. The @mixin mat-input-placeholder-floating is nested within the @mixin mat-input-typography.

[Faltek]

Have the same issue.

[Alyaeri]

Also experiencing this issue with all my .scss files

[kekel87]

I have the same problem.
I solved this by updating gulp-saas 2.3.2 to 3.1.0

[jelbourn]

@crisbeto we should probably separate the definitions anyway

[neogenz]

@kekel87

With gulp-sass 3.1.0, i have this error :

    node_modules/@angular/material/_theming.scss
Error: (50: #fbe9e7, 100: #ffccbc, 200: #ffab91, 300: #ff8a65, 400: #ff7043, 500: #ff5722, 600: #f4511e, 700: #e64a19, 800: #d84315, 900: #bf360c, A100: #ff9e80, A200: #ff6e40, A400: #ff3d00, A700: #dd2c00, contrast: (50: rgba(0, 0, 0, 0.87), 100: rgba(0, 0, 0, 0.87), 200: rgba(0, 0, 0, 0.87), 300: rgba(0, 0, 0, 0.87), 400: rgba(0, 0, 0, 0.87), 500: white, 600: white, 700: white, 800: white, 900: white, A100: rgba(0, 0, 0, 0.87), A200: rgba(0, 0, 0, 0.87), A400: white, A700: white), default: #ff5722, lighter: #ffccbc, darker: #e64a19, default-contrast: white, lighter-contrast: rgba(0, 0, 0, 0.87), darker-contrast: white, "50-contrast": rgba(0, 0, 0, 0.87), "100-contrast": rgba(0, 0, 0, 0.87), "200-contrast": rgba(0, 0, 0, 0.87), "300-contrast": rgba(0, 0, 0, 0.87), "400-contrast": rgba(0, 0, 0, 0.87), "500-contrast": white, "600-contrast": white, "700-contrast": white, "800-contrast": white, "900-contrast": white, "A100-contrast": rgba(0, 0, 0, 0.87), "A200-contrast": rgba(0, 0, 0, 0.87), "A400-contrast": white, "A700-contrast": white, "contrast-contrast": null) isn't a valid CSS value.
        on line 1081 of node_modules/@angular/material/_theming.scss
>>     $result: map_merge($result, (
   -------------^

[18:46:15] Finished 'sass' after 135 ms```

[neogenz]

And i have this error if i try to compile my custom-angular-material.scss from .angular-cli.json :

Error: Undefined variable: "$config".
        on line 2512 of node_modules/@angular/material/_theming.scss
        from line 1 of src/assets/style/angular-material-custom.scss

To see my version of this, my package.json :

{
  "name": "front-pulpe",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^4.2.3",
    "@angular/common": "^4.2.3",
    "@angular/compiler": "^4.2.3",
    "@angular/compiler-cli": "^4.2.3",
    "@angular/core": "^4.2.3",
    "@angular/forms": "^4.2.3",
    "@angular/http": "^4.2.3",
    "@angular/material": "2.0.0-beta.6",
    "@angular/platform-browser": "^4.2.3",
    "@angular/platform-browser-dynamic": "^4.2.3",
    "@angular/platform-server": "^4.2.3",
    "@angular/router": "^4.2.3",
    "@ultimate/ngxerrors": "^1.3.0",
    "angular-2-local-storage": "^1.0.1",
    "angular2-jwt": "^0.2.3",
    "bootstrap": "^4.0.0-alpha.6",
    "chart.js": "^2.6.0",
    "core-js": "^2.4.1",
    "daemonite-material": "^4.0.0-alpha.6",
    "font-awesome": "^4.7.0",
    "jquery": "^3.2.1",
    "moment": "^2.18.1",
    "ng-sidebar": "^4.2.3",
    "ng2-bootstrap-modal": "^1.0.1",
    "ng2-charts": "^1.6.0",
    "ng2-slim-loading-bar": "^4.0.0",
    "rxjs": "^5.4.1",
    "tether": "^1.4.0",
    "typescript": "^2.3.4",
    "zone.js": "^0.8.12"
  },
  "devDependencies": {
    "@angular/cli": "^1.1.2",
    "@angular/compiler-cli": "^2.4.0",
    "@types/jasmine": "2.5.38",
    "@types/node": "~6.0.60",
    "codelyzer": "~2.0.0",
    "electron": "^1.6.11",
    "gulp": "^3.9.1",
    "gulp-sass": "^3.1.0",
    "jasmine-core": "~2.5.2",
    "jasmine-spec-reporter": "~3.2.0",
    "karma": "~1.4.1",
    "karma-chrome-launcher": "^2.1.1",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^0.2.0",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "node-sass": "^4.5.0",
    "protractor": "~5.1.0",
    "ts-node": "~2.0.0",
    "tslint": "~4.4.2",
    "typescript": "~2.0.0"
  }
}

[xonuzofa]

Your fix allows me to build but is causing an issue with the prefix like so:

<div class="col-sm-6">
    <md-input-container>
        <input mdInput type="text" placeholder="Final Price" formControlName="cost_string">
            <span md-prefix *ngIf="form.controls.cost_string.value">$&nbsp;</span>
    </md-input-container>
</div>

[xonuzofa]

Use mdPrefix instead of md-prefix. Fixes issue.