---
title: How to Share Variables Between Javascript and Sass
description: Sharing variables between environments is the holy grail of programming. Here’s how to share variables between Javascript and Sass (or CSS!).
---

[Blog | Blue Matador ](https://www.bluematador.com/blog)

# [How to Share Variables Between Javascript and Sass](https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass)

 Written by [Blue Matador](https://www.bluematador.com/blog/author/blue-matador) | May 16, 2017 3:33:00 AM

 Sharing variables between environments is the holy grail of programming. Here's how to share variables between Javascript and Sass (or CSS!).

With the rise of large single page applications, Javascript and CSS have become increasingly intertwined. It’s often the case that values are copied between the two (for example, animation durations for use with React’s [CSSTransitionGroup](https://github.com/reactjs/react-transition-group) or passing brand colors into a graphing library). However, maintaining two copies of the same value inevitably leads to updating only one and ending up with a frustrating bug. Luckily, with [webpack](https://webpack.js.org/) and [CSS modules](https://github.com/css-modules/css-modules), there is a better way. In this blog post, we’ll explore how to share a variable between your scripts and your styles with the aforementioned example of sharing an animation duration for a `CSSTransitionGroup`.

The first step is to install our dependencies:

```
npm install sass-loader node-sass webpack --save-dev
```

Next, we need to configure webpack to use `sass-loader` so we can access our Sass code from Javascript.

```
// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader', 'sass-loader']
      }
    ]
  }
}
```

Now for the interesting part. We define the actual variable value in Sass and export it to Javascript. CSS Modules have a neat utility called `:export`. The `:export` directive works basically like ES6’s `export` keyword. Your Sass code will export an object containing the variable name to use in Javascript and its associated value. These values are all exported as strings.

```
// styles/animation.scss
$animation-length: 250;
$animation-length-ms: $animation-length + 0ms;

:export {
  animationMillis: $animation-length-ms;
}

.component-enter {
  ...

  transition: all $animation-length-ms ease-in;
}
```

You’ll notice that we first declare the integer value in one variable, and then add `0ms` to it in other. This allows us to export only `"250"` rather than `"250ms"` which is a little easier to parse on the Javascript side (adding `0ms` to the number coerces its “type” into `ms`).

Now, in Javascript, we just need to import the styles from the stylesheet, and parse an int out of the variable we exported!

```
// js/animation.js
import styles from '../styles/animation.scss'
import CSSTransitionGroup from 'react-transition-group/CSSTransitionGroup'

const millis = parseInt(styles.animationMillis)

...

<CSSTransitionGroup
  transitionName="component"
  transitionEnterTimeout={millis}
  transitionLeaveTimeout={millis}
/>

...
```

This method is incredibly easy, but it will pay off in spades when you avoid the headache of syncing changes between Javascript and Sass. 

[View full post](https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass)

```json
{
  "@context" : "http://schema.org",
  "@type" : "BlogPosting",
  "author" : {
    "@type" : "Person",
    "name" : "Blue Matador"
  },
  "dateModified" : "2020-10-22T18:28:31.160Z",
  "datePublished" : "2017-05-16T03:33:00Z",
  "headline" : "How to Share Variables Between Javascript and Sass",
  "image" : {
    "@type" : "ImageObject",
    "height" : 60,
    "url" : "/hs/hsstatic/content_shared_assets/static-1.4092/img/default-amp-logo.png",
    "width" : 60
  },
  "mainEntityOfPage" : "https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass",
  "publisher" : {
    "@type" : "Organization",
    "logo" : {
      "@type" : "ImageObject",
      "height" : 60,
      "url" : "/hs/hsstatic/content_shared_assets/static-1.4092/img/default-amp-logo.png",
      "width" : 60
    },
    "name" : "Blue Matador Blog"
  }
}
```