Можно ли передать значение переменной в SASS из компонента React?

Question

[IvanKalinin]

Все доброго времени.
Есть компонент:

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

И его стили:

$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);
  }
}

Возможно ли из JSX передать значение, например 20px и применить его к $width, чтоб остальные значения автоматически посчитались или передать цвет, чтоб применить его к background-color в ::before?

Answer 1

[bob_cody]

Нет, так как .scss компилируется в css отдельно и с компонентом никак не связан, поэтому доступа к переменным в .scss нет.