Is it possible to pass a variable value to SASS from a React component?

Question

Sass

All good time.
There is a component:

import React, { PropTypes, Component } from 'react';
import cn from 'classnames';

import styles from './Spinner.scss';

export default class Spinner extends Component {
  static propTypes = {
    className: PropTypes.string,
  }

  static defaultProps = {
    className: '',
  }

  render() {
    const { className } = this.props;
    const dots = new Array(12).fill('');
    return (
      <div
        className={cn(
          className,
          styles.spinner
        )}
      >
        { dots.map((...i) => (
          <div
            key={i}
            className={styles.dot}
          />
        ))}
      </div>
    );
  }
}

And his styles:

$width: 40px;
.spinner {
  margin: 0 auto;
  position: relative;
  height: $width;
  width: $width;
}

.dot {
  width: 15%;
  height: 15%;
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 50%;
  transform-origin: $width/2 $width/2;
  &:before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background-color: #000;
    border-radius: 100%;
    animation-name: spin;
    animation-duration: 1.2s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    animation-fill-mode: both;
  }
}

$count: 12;
@for $i from 0 through $count {
  .dot:nth-child( #{$i} ) {
    transform: rotate(#{360*$i/$count}deg);
    &::before {
      $delay: ($i - $count)/10 + 0.1s;
      animation-delay: $delay;
    }
  }
}

@keyframes spin {
  0%, 100% {
    transform: scale(0);
  }
  50% {
    transform: scale(1);
  }
}

Is it possible from JSX to pass a value like 20px and apply it to $width so that the other values ​​are automatically calculated or pass a color to apply it to background-color in ::before?

Answer 1

No, because .scss is compiled into css separately and is not related to the component in any way, so there is no access to variables in .scss.