CSS Variables and Angular 5

Question

I'm trying to use css varible in my Angular application, inside a child component, and it's just not working. In the browser's Elements tool (I'm using Chrome latest version) the var() doesn't do anything. expamle:

css file:

:root {
  --width: 43.75%;
}

#content {
  display: grid;
  grid-template-columns: repeat(2, var(--width));
  grid-auto-rows: 90%;
  grid-gap: 3px;
  align-content: center;
  justify-content: center;
  border: 2px solid black;
  width: 400px;
  height: 250px;
  margin: 0 auto;
}

And thats how it's shown in the browser:

Is CSS Variables can work with Angulat at all? Thank you

You have any special postcss or similar plugins that might be killing this? — Zlatko
– Zlatko, Commented Jan 23, 2018 at 8:06

Vlad S. · Accepted Answer · 2018-01-23 08:24:19Z

24

Your root selector probably gets also attribute with angular component id.

Try this

::ng-deep :root {
  --width: 43.75%;
}

answered Jan 23, 2018 at 8:24

Vlad S.

4263 silver badges8 bronze badges

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

3 Comments

TalGabay Over a year ago

Thank you! it works now. probably wrong root selector

Vlad S. Over a year ago

after styles encapsulating your selector will be smth like this :root[_ngcontent_c7] {...}. The ::ng-deep removes styles encapsulating for next selectors.

Srikanth Over a year ago

::ng-deep is being deprecated. "The shadow-piercing descendant combinator is deprecated and support is being removed from major browsers and tools. As such we plan to drop support in Angular (for all 3 of /deep/, >>> and ::ng-deep). Until then ::ng-deep should be preferred for a broader compatibility with the tools." Link

J Hutch · Accepted Answer · 2019-06-14 21:00:02Z

16

I know this is old, but a better solution than ::ng-deep is to use :host instead. This will avoid issues later on when ::ng-deep is deprecated.

:host {
  --width: 43.75%;
}

answered Jun 14, 2019 at 21:00

J Hutch

1611 silver badge3 bronze badges

Comments

user4676340 · Accepted Answer · 2018-01-23 08:05:00Z

0

CSS variables don't depend on Angular, they rely on your browser. You need to have an up-to-date browser to use them. CanIUse can help you with that.

Since you're using Angular, you could use .scss files, or .less files, for SASS and LESS. They both handle variables, and much, much more.

If you're using the CLI, simply rename your files, and rename the reference to those files in your components decorators.

You can also go to .angular-cli.json and change the value of styleExts to the one you chose.

answered Jan 23, 2018 at 8:05

user4676340

Collectives™ on Stack Overflow

CSS Variables and Angular 5

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related