CODEWITHSUNDEEP
javascriptcssangularcss-variables
TalGabay
TalGabay

Reputation: 258

CSS Variables and Angular 5

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: enter image description here

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

Upvotes: 13

Views: 8510

Answers (3)

J Hutch
J Hutch

Reputation: 151

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%;
}

Upvotes: 15

Vlad S.
Vlad S.

Reputation: 416

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

Try this

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

Upvotes: 23

user4676340
user4676340

Reputation:

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.

Upvotes: 0

Related Questions