Sass error : Invalid CSS after "typography-config" angular 4.x

Question

I want to integrate my custom fonts for my angular 4.x project which are in assets folder. and I am using angular material. so for material I am setting custom typography in my styles.sass

Here's the code:

@import '~@angular/material/theming'

$used-fonts : 'Avenir', arial

$general-typography : mat-typography-config(
  $font-family: quote($used-fonts)
)

@include mat-core($general-typography)

The error which I got:

Invalid CSS after "...ography-config(": expected expression (e.g. 1px, bold), was "{"

giving me an error at :

any idea?

Answer 1

I suggest You should try within one line. it will consider it as nested value

$general-typography : mat-typography-config($font-family: quote($used-fonts))

Answer 2

I suggest to try adding semicolons after each declaration. CSS requires a semicolon after each declaration except the last declaration in a rule (which is optional), and I think SASS follows suit.

@import '~@angular/material/theming';

$used-fonts : 'Avenir', arial;

$general-typography : mat-typography-config(
  $font-family: quote($used-fonts)
);

@include mat-core($general-typography);