1. Sass和SCSS的區(qū)別

SCSS是Sass推出的一個(gè)全新的語(yǔ)法，更加貼近c(diǎn)ss，所以一般都是用SCSS。
請(qǐng)注意 Sass 從來沒有大寫過，無論你指的是語(yǔ)法或者這個(gè)語(yǔ)言。同時(shí)， SCSS 一直是大寫的！

2. 安裝（mac）

我安裝的是node-sass
在命令行里進(jìn)入~目錄，輸入：

• npm config set registry https://registry.npm.taobao.org/
• echo 'export SASS_BINARY_SITE="https://npm.taobao.org/mirrors/node-sass"'>> ~/.bashrc(若是用的zshrc則改為~/.zshrc)
• source ~/.bashrc(同上)
• sudo cnpm i -g node-sass（需要先安裝cnpm）
• mkdir ~/Desktop/scss-demo
• cd ~/Desktop/scss-demo
• mkdir scss css
• touch scss/style.scss
• node-sass style.scss style.css -w style.scss（開始監(jiān)聽style.scss）

3. 使用

終端進(jìn)入含css和scss文件的目錄，執(zhí)行
node-sass style.scss style.css -w style.scss（開始監(jiān)聽style.scss）
直接編輯style.scss，node-scss就會(huì)自動(dòng)給style.css實(shí)時(shí)更新。
在 scss 文件里添加以下內(nèi)容

@function px( $px ){
  @return $px/$designWidth*10 + rem;  //js里獲取innerWidth的時(shí)候除以了10，這里就要乘以10
}

$designWidth : 640; // 640是設(shè)計(jì)稿的寬度，設(shè)計(jì)師給的。

.child{
  width: px(320);
  height: px(160);
  margin: px(40) px(40);
  border: 1px solid red;
  float: left;
  font-size: 1.2em;
}

可看到css變化，SCSS將px變成了rem放入了css中。
若不使用SCSS的話，我們每次將px轉(zhuǎn)化為rem都要自己去算，使用SCSS可以幫我們算

4. 語(yǔ)法

.topNavBar{
  nav{
    background: red;
  }
}