Access Angular-Material SCSS Variables (Angular4)

Question

How to access certain SCSS variables in Angular-Material (Angular4)?

For example, the default toolbar has a CSS class as follow:

.mat-toolbar {
    display: flex;
    box-sizing: border-box;
    width: 100%;
    padding: 0 16px;
    flex-direction: column;
}

I want to get the padding value, i.e. 16px, store it as $fatty-padding and then use it in my custom class, for example:

.custom-toolbar {
    padding: $fatty-padding $fatty-padding;
    margin: 0 $fatty-padding;
}

Is it possible?

P.S. · Accepted Answer · 2017-11-04 03:46:10Z

1

Angular Material styles are written without variables:

So there is no easy way to get this styles and store to the variable in SCSS.

answered Nov 4, 2017 at 3:46

P.S.

16.4k14 gold badges65 silver badges86 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user276648 Over a year ago

What about colors? Isn't it possible to get the default theme colors? It feels like something that would be useful.

P.S. Over a year ago

@user276648, I have tried, but failed, I can't extract the specific color from Angular Material's theme. So there are two cases: 1. I don't have enough skills. 2. It's not possible. I can't really say, what case is it, but when I'm looking at AM theme, I feel that it should be possible.

Collectives™ on Stack Overflow

Access Angular-Material SCSS Variables (Angular4)

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related