scss里的符号＆的用法

$代表定义变量

$blue:#324157;
color:$blue;

& 用在嵌套的scss代码里，来引用父元素

.dashboard {
&-container {
margin: 30px;
}
&-text {
font-size: 30px;
line-height: 46px;
}
}

编译成css之后，原本在scss的嵌套结构被展平了：

.dashboard-container {
margin: 30px; }
.dashboard-text {
font-size: 30px;
line-height: 46px; }

现在是有趣的部分。我们在 Sass 中定义实际变量值并将其导出到 Javascript。CSS 模块有一个简洁的实用程序，称为:export. 该:export指令的工作原理基本上类似于 ES6 的export关键字。您的 Sass 代码将导出一个对象，其中包含要在 Javascript 中使用的变量名称及其关联值。这些值都作为字符串导出。

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

你会注意到我们首先在一个变量中声明整数值，然后在另一个变量中添加0ms它。这允许我们只导出"250"而不是"250ms"在 Javascript 端更容易解析（添加0ms到数字将其“类型”强制转换为ms）。

现在，在 Javascript 中，我们只需要从样式表中导入样式，并从我们导出的变量中解析出一个 int！

// 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}
/>

...