Sass安裝設定

sass 是用ruby 來安裝，所以要確定系統裡面已經安裝了Ruby，因此要用gem來安裝，在自定的檔案夾底下輸入

gem install sass

就會自動安裝，安裝完可以輸入sass -v來看安裝的版本

將Sass 編譯成Css，將資料夾底下的style.scss轉換成css語法

$ sass Sass/style.scss:css/style.css

讓Sass自動編譯成Css，輸入以下語法，之後在Sass輸入語法就會自動轉成Css語法

$ sass --watch sass:css

輸入Ctrl+C 會跳出結束

Sass和css語法兩邊比對Sass編譯輸出成Css有四種排列格式:

1. nested ，嵌套

2. compact ，緊湊

3. expanded，擴展

4. compressed，壓縮

嵌套格式

.nav{
  height:100px;
    ul{
      margin:0;
      li{
       float:left;
       list-style:none;
       padding:5px;
    }
  }
}

嵌套格式輸出成CSS也是會成嵌套格式

.nav {
  height: 100px; }
  .nav ul {
    margin: 0; }
    .nav ul li {
      float: left;
      list-style: none;
      padding: 5px; }

緊湊格式

$ sass --watch sass:css --style compact

CSS輸出後的排列格式

壓縮格式

$ sass --watch sass:css --style compressed

擴展格式，也是一般常見格式

$ sass --watch sass:css --style expaned