前端不會用SASS是因?yàn)椴粫钚小?br> 用命令行可以實(shí)現(xiàn)SCSS到CSS的自動化。

1. 全局安裝Node-sass node-sass
   npm install -g node-sass
   （事實(shí)上SASS是Ruby社區(qū)寫的）
2. 為了演示實(shí)現(xiàn)過程，我先把目錄已有的一個(gè)style.css后綴改成style.scss
   mv style.css style.scss
   這樣直接改后綴是沒有問題的，因?yàn)镾CSS是完全兼容CSS的，它只是在CSS語法上加上一些更高級的用法。
3. 現(xiàn)在可以用node-sass把SCSS翻譯成CSS了
   node-sass style.scss style.css
   實(shí)際上現(xiàn)在只是將排版變得漂亮了一點(diǎn)，因?yàn)槲覀儾]有改SCSS的內(nèi)容。
4. 在style.scss寫一些新語法，例如：

.topNavBar{
        nav {
            padding-top: 5px;
            > ul {
                list-style: none;
                margin: 0;
                padding: 0;
                > li {
                    float: left;
                    margin-left: 17px;
                    margin-right: 17px;
                    position: relative;
                    > a {
                        font-size: 12px;
                        color: inherit;
                        font-weight: bold;
                        border-top: 3px solid transparent;
                        border-bottom: 3px solid transparent;
                        padding-top: 5px;
                        padding-bottom: 5px;
                        display: block;
                        position: relative;
                    }
                }
            }
        }
    }

5. 再次運(yùn)行命令 node-sass style.scss style.css，可以看到style.css里對應(yīng)內(nèi)容已經(jīng)被翻譯成CSS語法：

.topNavBar nav {
  padding-top: 5px; }
  .topNavBar nav > ul {
    list-style: none;
    margin: 0;
    padding: 0; }
    .topNavBar nav > ul > li {
      float: left;
      margin-left: 17px;
      margin-right: 17px;
      position: relative; }
      .topNavBar nav > ul > li > a {
        font-size: 12px;
        color: inherit;
        font-weight: bold;
        border-top: 3px solid transparent;
        border-bottom: 3px solid transparent;
        padding-top: 5px;
        padding-bottom: 5px;
        display: block;
        position: relative; }

6. 由于不能直接引入style.scss，現(xiàn)在每次改style.scss都要執(zhí)行一次命令將其翻譯成CSS語法，這樣寫豈不是很傻？
7. 使用-w監(jiān)聽style.scss的變動，每次style.scss有改動都自動翻譯
   node-sass style.scss style.css -w

如此就實(shí)現(xiàn)了從SCSS到CSS的自動化。