# Angular: Access CSS Variables

CSS Variables can be defined in css (or SCSS) like this:

<p class="callout info">NOTE: These are defines in the root element, in the styles.scss file of an app.</p>

```css
:root {
    --sidenav-width: 300px;
    --sidenav-collapsed-width: 50px;
    --sidenav-background-color: var(--app-background-color);
    --sidenav-text-color: var(--app-text-color);
    --sidenav-transition-duration: 400ms;
    --app-background-color: #b6b9bd;
    --app-text-color: #282828;
}
```

The above defines several global CSS variables (root scoped).  
It as well, shows how to define a variable that takes the value of another.

### Reading

Here's how we can access these global CSS variables from an Angular component:

```typescript
const sidenavTransitionDurationFromCssVariable =
        getComputedStyle(document.body)
        .getPropertyValue('--sidenav-transition-duration');

let dur = parseInt(sidenavTransitionDurationFromCssVariable, 10);
```

The above code snippet retrieves a global CSS variable called, sidenav-transition-duration, from the DOM, and parses it into an integer (with a default value, if not found).

This allows an Angular component to use data stored in CSS.

### Writing

Here's how to write a new value to the same global CSS variable from an Angular component:

```typescript
document.documentElement.style
    .setProperty('--sidenav-transition-duration', '300');
```

The above statement writes a '300' to the transition duration variable that is at :root scope of the DOM.

<p class="callout info">NOTE: All writes to variables are as strings, so you will have to convert to string before the setProperty call.</p>