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} /> ...這種方法非常簡單，但是當您避免在 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也是通過腳步的方式，編譯后，執行了一個循環語句，原理是相通的。