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)

...

="component"
  transitionEnterTimeout={millis}
  transitionLeaveTimeout={millis}
/>

...

这种方法非常简单，但是当您避免在 Javascript 和 Sass 之间同步更改的麻烦时，它会获得回报。

那些不明不白的$符号设计--Sass和Emmet，变量设计原理相通

以前看到php变量的定义，直接使用$符号开始，怎么看都不习惯。后来呀，在使用Emmet的过程中，又接触到了$符号。今天，在学习Sass的过程种，再一次接触到$符号，兴致所致，不由得想写一篇，对比一下搞不懂的$符号设计。 

1. Emmet

 div.item-$*5{haha}

 $*5 被对应的替换为1，2，3，4，5

2. Sass

生成item-1, item-2, item-3, item-4, item-5 这5个类，$i，即$1, $2, $3, $4, $5 分别代表一个变量名，插入选择器中

 输入sass命令： sass input.scss output.css --style expanded， 编译后，生成的output.css css类如下：

在index.html中引入output.css：

运行效果如下：

 3.总结

$1, $2, $3, $4, $5代表变量，Emmet相当于直接执行了一个循环语句，Sass也是通过脚步的方式，编译后，执行了一个循环语句，原理是相通的。