Node-sass实现从SCSS到CSS的自动化

前端不会用SASS是因为不会命令行。
用命令行可以实现SCSS到CSS的自动化。

1. 全局安装Node-sass node-sass
   npm install -g node-sass
   （事实上SASS是Ruby社区写的）
2. 为了演示实现过程，我先把目录已有的一个style.css后缀改成style.scss
   mv style.css style.scss
   这样直接改后缀是没有问题的，因为SCSS是完全兼容CSS的，它只是在CSS语法上加上一些更高级的用法。
3. 现在可以用node-sass把SCSS翻译成CSS了
   node-sass style.scss style.css
   实际上现在只是将排版变得漂亮了一点，因为我们并没有改SCSS的内容。
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. 再次运行命令 node-sass style.scss style.css，可以看到style.css里对应内容已经被翻译成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，现在每次改style.scss都要执行一次命令将其翻译成CSS语法，这样写岂不是很傻？
7. 使用-w监听style.scss的变动，每次style.scss有改动都自动翻译
   node-sass style.scss style.css -w

如此就实现了从SCSS到CSS的自动化。